@atlaskit/renderer 137.1.9 → 137.1.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/cjs/actions/index.js +2 -2
  3. package/dist/cjs/react/index.js +2 -2
  4. package/dist/cjs/react/marks/breakout.js +3 -3
  5. package/dist/cjs/react/marks/code.js +1 -1
  6. package/dist/cjs/react/nodes/date.js +1 -1
  7. package/dist/cjs/react/nodes/embedCard.js +2 -2
  8. package/dist/cjs/react/nodes/heading-anchor.js +1 -1
  9. package/dist/cjs/react/nodes/layoutSection.js +2 -2
  10. package/dist/cjs/react/nodes/mediaInline.js +1 -1
  11. package/dist/cjs/react/nodes/mediaSingle/index.js +1 -1
  12. package/dist/cjs/react/nodes/table/colgroup.js +1 -2
  13. package/dist/cjs/react/nodes/table/sticky.js +2 -4
  14. package/dist/cjs/react/nodes/table/table.js +1 -12
  15. package/dist/cjs/react/nodes/table.js +474 -206
  16. package/dist/cjs/ui/Expand.js +1 -1
  17. package/dist/cjs/ui/Renderer/RendererStyleContainer.js +3 -3
  18. package/dist/cjs/ui/Renderer/breakout-ssr.js +1 -2
  19. package/dist/cjs/ui/Renderer/index.js +7 -7
  20. package/dist/cjs/utils.js +2 -2
  21. package/dist/es2019/actions/index.js +1 -1
  22. package/dist/es2019/react/index.js +1 -1
  23. package/dist/es2019/react/marks/breakout.js +1 -1
  24. package/dist/es2019/react/marks/code.js +1 -1
  25. package/dist/es2019/react/nodes/date.js +1 -1
  26. package/dist/es2019/react/nodes/embedCard.js +1 -1
  27. package/dist/es2019/react/nodes/heading-anchor.js +1 -1
  28. package/dist/es2019/react/nodes/layoutSection.js +1 -1
  29. package/dist/es2019/react/nodes/mediaInline.js +1 -1
  30. package/dist/es2019/react/nodes/mediaSingle/index.js +1 -1
  31. package/dist/es2019/react/nodes/table/colgroup.js +1 -2
  32. package/dist/es2019/react/nodes/table/sticky.js +2 -3
  33. package/dist/es2019/react/nodes/table/table.js +1 -12
  34. package/dist/es2019/react/nodes/table.js +458 -191
  35. package/dist/es2019/ui/Expand.js +1 -1
  36. package/dist/es2019/ui/Renderer/RendererStyleContainer.js +1 -1
  37. package/dist/es2019/ui/Renderer/breakout-ssr.js +1 -2
  38. package/dist/es2019/ui/Renderer/index.js +4 -4
  39. package/dist/es2019/utils.js +1 -1
  40. package/dist/esm/actions/index.js +1 -1
  41. package/dist/esm/react/index.js +1 -1
  42. package/dist/esm/react/marks/breakout.js +1 -1
  43. package/dist/esm/react/marks/code.js +1 -1
  44. package/dist/esm/react/nodes/date.js +1 -1
  45. package/dist/esm/react/nodes/embedCard.js +1 -1
  46. package/dist/esm/react/nodes/heading-anchor.js +1 -1
  47. package/dist/esm/react/nodes/layoutSection.js +1 -1
  48. package/dist/esm/react/nodes/mediaInline.js +1 -1
  49. package/dist/esm/react/nodes/mediaSingle/index.js +1 -1
  50. package/dist/esm/react/nodes/table/colgroup.js +1 -2
  51. package/dist/esm/react/nodes/table/sticky.js +2 -4
  52. package/dist/esm/react/nodes/table/table.js +1 -12
  53. package/dist/esm/react/nodes/table.js +472 -203
  54. package/dist/esm/ui/Expand.js +1 -1
  55. package/dist/esm/ui/Renderer/RendererStyleContainer.js +1 -1
  56. package/dist/esm/ui/Renderer/breakout-ssr.js +1 -2
  57. package/dist/esm/ui/Renderer/index.js +4 -4
  58. package/dist/esm/utils.js +1 -1
  59. package/dist/types/react/nodes/table/sticky.d.ts +1 -2
  60. package/dist/types/react/nodes/table.d.ts +78 -8
  61. package/package.json +5 -7
  62. package/dist/cjs/react/nodes/tableNew.js +0 -1020
  63. package/dist/es2019/react/nodes/tableNew.js +0 -956
  64. package/dist/esm/react/nodes/tableNew.js +0 -1014
  65. package/dist/types/react/nodes/tableNew.d.ts +0 -189
@@ -1,1014 +0,0 @@
1
- import _typeof from "@babel/runtime/helpers/typeof";
2
- import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
3
- import _createClass from "@babel/runtime/helpers/createClass";
4
- import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
5
- import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
6
- import _inherits from "@babel/runtime/helpers/inherits";
7
- import _defineProperty from "@babel/runtime/helpers/defineProperty";
8
- function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
9
- function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
10
- function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
11
- function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
12
- function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
13
- function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
14
- function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
15
- /* eslint-disable @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/enforce-style-prop, @repo/internal/react/no-class-components */
16
- import React from 'react';
17
- import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
18
- import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
19
- import { FullPagePadding } from '../../ui/Renderer/style';
20
- import { fg } from '@atlaskit/platform-feature-flags/fg';
21
- import { RendererCssClassName } from '../../consts';
22
- import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
23
- import { SortOrder } from '@atlaskit/editor-common/types';
24
- import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, akEditorMaxWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
25
- import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
26
- import { TableCell, TableHeader } from './tableCell';
27
- import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
28
- import { Table } from './table/table';
29
- import { isCommentAppearance, isFullWidthOrFullPageAppearance, isFullWidthAppearance, isMaxWidthAppearance, isFullPageAppearance } from '../utils/appearance';
30
- import { TableStickyScrollbar } from './TableStickyScrollbar';
31
- import { useRendererContext } from '../../renderer-context';
32
- import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
33
- import { isTableInContentMode } from '@atlaskit/editor-common/table';
34
- import { isContentModeSupported } from './table/content-mode';
35
- var stickyContainerBaseStyles = {
36
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
37
- height: "var(--ds-space-250, 20px)",
38
- // MAX_BROWSER_SCROLLBAR_HEIGHT
39
- // Follow editor to hide by default so it does not show empty gap in SSR
40
- // https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/editor/editor-plugin-table/src/nodeviews/TableComponent.tsx#957
41
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
42
- display: 'block',
43
- width: '100%'
44
- };
45
- var stickyContainerAdditionalStyles = {
46
- visibility: 'hidden',
47
- overflowX: 'auto',
48
- position: 'sticky',
49
- bottom: "var(--ds-space-0, 0px)",
50
- zIndex: 1
51
- };
52
- export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
53
- return isFullWidthOrFullPageAppearance(appearance) || isCommentAppearance(appearance);
54
- };
55
- export var isStickyScrollbarEnabled = function isStickyScrollbarEnabled(appearance) {
56
- return isFullWidthOrFullPageAppearance(appearance) && editorExperiment('platform_renderer_table_sticky_scrollbar', true, {
57
- exposure: true
58
- });
59
- };
60
- export var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
61
- if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
62
- return children;
63
- }
64
- var order = tableOrderStatus.order,
65
- columnIndex = tableOrderStatus.columnIndex;
66
- var compareNodesInOrder = createCompareNodes({
67
- getInlineCardTextFromStore: function getInlineCardTextFromStore(attrs) {
68
- var _ref = attrs,
69
- url = _ref.url;
70
- if (!url) {
71
- return null;
72
- }
73
- return smartCardStorage.get(url) || null;
74
- }
75
- }, order);
76
- var tableArray = convertProsemirrorTableNodeToArrayOfRows(tableNode);
77
- var tableArrayWithChildren = tableArray.map(function (rowNodes, index) {
78
- return {
79
- rowNodes: rowNodes,
80
- rowReact: children[index]
81
- };
82
- });
83
- var headerRow = tableArrayWithChildren.shift();
84
- var sortedTable = tableArrayWithChildren.sort(function (rowA, rowB) {
85
- return compareNodesInOrder(rowA.rowNodes[columnIndex], rowB.rowNodes[columnIndex]);
86
- });
87
- if (headerRow) {
88
- sortedTable.unshift(headerRow);
89
- }
90
- return sortedTable.map(function (elem) {
91
- return elem.rowReact;
92
- });
93
- };
94
- export var hasRowspan = function hasRowspan(row) {
95
- var hasRowspan = false;
96
- row.forEach(function (cell) {
97
- return hasRowspan = hasRowspan || cell.attrs.rowspan > 1;
98
- });
99
- return hasRowspan;
100
- };
101
- export var getRefTop = function getRefTop(refElement) {
102
- return Math.round(refElement.getBoundingClientRect().top);
103
- };
104
- export var shouldHeaderStick = function shouldHeaderStick(scrollTop, tableTop, tableBottom, rowHeight) {
105
- return tableTop <= scrollTop && !(tableBottom - rowHeight <= scrollTop);
106
- };
107
- export var shouldHeaderPinBottom = function shouldHeaderPinBottom(scrollTop, tableBottom, rowHeight) {
108
- return tableBottom - rowHeight <= scrollTop && !(tableBottom < scrollTop);
109
- };
110
- export var addSortableColumn = function addSortableColumn(rows, tableOrderStatus, onSorting
111
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
112
- ) {
113
- return React.Children.map(rows, function (row, index) {
114
- if (index === 0) {
115
- return /*#__PURE__*/React.cloneElement(React.Children.only(row), {
116
- tableOrderStatus: tableOrderStatus,
117
- onSorting: onSorting
118
- });
119
- }
120
- return row;
121
- });
122
- };
123
- export var isHeaderRowEnabled = function isHeaderRowEnabled(rows
124
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
125
- ) {
126
- if (!rows.length) {
127
- return false;
128
- }
129
- // Ignored via go/ees005
130
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
131
- var children = rows[0].props.children;
132
- if (!children.length) {
133
- return false;
134
- }
135
- if (children.length === 1) {
136
- return children[0].type === TableHeader;
137
- }
138
- return children.every(function (node) {
139
- return node.type === TableHeader;
140
- });
141
- };
142
- export var tableCanBeSticky = function tableCanBeSticky(node, children
143
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
144
- ) {
145
- return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
146
- };
147
- /**
148
- * Fake left/right borders rendered as direct children of TABLE_CONTAINER
149
- * (the non-scrolling parent of the horizontally scrolling TABLE_NODE_WRAPPER).
150
- *
151
- * The visible styling for these divs lives in `tableFakeBorderStyles`
152
- * (`renderer/src/ui/Renderer/RendererStyleContainer.tsx`), which is applied
153
- * when `isInsideSyncBlock` is true.
154
- *
155
- * Shared between `renderer/src/react/nodes/table.tsx` and
156
- * `renderer/src/react/nodes/tableNew.tsx` so the two stay in sync.
157
- */
158
- var TableFakeBorders = function TableFakeBorders(_ref2) {
159
- var isNumberColumnEnabled = _ref2.isNumberColumnEnabled;
160
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
161
- className: TableSharedCssClassName.TABLE_LEFT_BORDER,
162
- "data-with-numbered-table": isNumberColumnEnabled ? 'true' : undefined,
163
- "data-testid": "table-left-border"
164
- }), /*#__PURE__*/React.createElement("div", {
165
- className: TableSharedCssClassName.TABLE_RIGHT_BORDER,
166
- "data-with-numbered-table": isNumberColumnEnabled ? 'true' : undefined,
167
- "data-testid": "table-right-border"
168
- }));
169
- };
170
-
171
- /**
172
- * Reads `nestedRendererType` from RendererContext and renders the fake left/right
173
- * borders only when the current renderer is the nested renderer for a reference
174
- * synced block.
175
- */
176
- export var RefSyncBlockFakeBorders = function RefSyncBlockFakeBorders(_ref3) {
177
- var isNumberColumnEnabled = _ref3.isNumberColumnEnabled;
178
- var _useRendererContext = useRendererContext(),
179
- nestedRendererType = _useRendererContext.nestedRendererType;
180
- var isInsideOfRefSyncBlock = nestedRendererType === 'syncedBlock';
181
- if (!isInsideOfRefSyncBlock) {
182
- return null;
183
- }
184
- return /*#__PURE__*/React.createElement(TableFakeBorders, {
185
- isNumberColumnEnabled: isNumberColumnEnabled
186
- });
187
- };
188
-
189
- /**
190
- * TableContainer renders tables using only CSS-based rules
191
- */
192
- // Ignored via go/ees005
193
- // eslint-disable-next-line @repo/internal/react/no-class-components
194
- /**
195
- *
196
- */
197
- export var TableContainer = /*#__PURE__*/function (_React$Component) {
198
- function TableContainer() {
199
- var _this;
200
- _classCallCheck(this, TableContainer);
201
- for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
202
- args[_key] = arguments[_key];
203
- }
204
- _this = _callSuper(this, TableContainer, [].concat(args));
205
- _defineProperty(_this, "state", {
206
- stickyMode: 'none',
207
- wrapperWidth: 0,
208
- headerRowHeight: 0
209
- });
210
- _defineProperty(_this, "tableRef", /*#__PURE__*/React.createRef());
211
- _defineProperty(_this, "stickyHeaderRef", /*#__PURE__*/React.createRef());
212
- _defineProperty(_this, "stickyScrollbarRef", /*#__PURE__*/React.createRef());
213
- // used for sync scroll + copying wrapper width to sticky header
214
- _defineProperty(_this, "stickyWrapperRef", /*#__PURE__*/React.createRef());
215
- _defineProperty(_this, "wrapperRef", /*#__PURE__*/React.createRef());
216
- _defineProperty(_this, "overflowParent", null);
217
- _defineProperty(_this, "updatedLayout", 'custom');
218
- _defineProperty(_this, "containerRef", null);
219
- _defineProperty(_this, "_isInsideNestedRenderer", null);
220
- _defineProperty(_this, "_isInsideTableCell", null);
221
- // Stores the last computed style values from render() for use by applyNestedRendererTableFix().
222
- // This avoids reading from the DOM which can be stale when React removes properties between renders.
223
- _defineProperty(_this, "lastComputedStyle", {});
224
- _defineProperty(_this, "resizeObserver", null);
225
- _defineProperty(_this, "applyResizerChange", function (entries) {
226
- var wrapperWidth = _this.state.wrapperWidth;
227
- var headerRowHeight = _this.state.headerRowHeight;
228
- var _iterator = _createForOfIteratorHelper(entries),
229
- _step;
230
- try {
231
- for (_iterator.s(); !(_step = _iterator.n()).done;) {
232
- var entry = _step.value;
233
- if (entry.target === _this.wrapperRef.current) {
234
- wrapperWidth = entry.contentRect.width;
235
- } else if (entry.target === _this.stickyHeaderRef.current) {
236
- headerRowHeight = Math.round(entry.contentRect.height);
237
- }
238
- }
239
- } catch (err) {
240
- _iterator.e(err);
241
- } finally {
242
- _iterator.f();
243
- }
244
- if (headerRowHeight !== _this.state.headerRowHeight || wrapperWidth !== _this.state.wrapperWidth) {
245
- _this.setState({
246
- wrapperWidth: wrapperWidth,
247
- headerRowHeight: headerRowHeight
248
- });
249
- }
250
- });
251
- /**
252
- * Callback ref that captures the container DOM element and also forwards
253
- * to the handleRef prop from the overflow shadow HOC.
254
- */
255
- _defineProperty(_this, "setContainerRef", function (el) {
256
- if (_this.containerRef !== el) {
257
- _this._isInsideNestedRenderer = null;
258
- _this._isInsideTableCell = null;
259
- }
260
- _this.containerRef = el;
261
- var handleRef = _this.props.handleRef;
262
- if (typeof handleRef === 'function') {
263
- handleRef(el);
264
- } else if (handleRef && _typeof(handleRef) === 'object') {
265
- // Ignored via go/ees005
266
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
267
- handleRef.current = el;
268
- }
269
- });
270
- _defineProperty(_this, "componentWillUnmount", function () {
271
- if (_this.overflowParent) {
272
- // Ignored via go/ees005
273
- // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
274
- _this.overflowParent.removeEventListener('scroll', _this.onScroll);
275
- }
276
- if (_this.nextFrame) {
277
- cancelAnimationFrame(_this.nextFrame);
278
- }
279
- if (_this.resizeObserver) {
280
- _this.resizeObserver.disconnect();
281
- }
282
- if (_this.stickyScrollbar) {
283
- _this.stickyScrollbar.dispose();
284
- }
285
- });
286
- _defineProperty(_this, "getScrollTop", function () {
287
- var stickyHeaders = _this.props.stickyHeaders;
288
- var offsetTop = stickyHeaders && stickyHeaders.offsetTop || 0;
289
- return (_this.overflowParent ? _this.overflowParent.top : 0) + offsetTop;
290
- });
291
- _defineProperty(_this, "updateSticky", function () {
292
- var tableElem = _this.tableRef.current;
293
- var refElem = _this.stickyHeaderRef.current;
294
- if (!tableElem || !refElem) {
295
- return;
296
- }
297
- var scrollTop = _this.getScrollTop() + tableStickyPadding;
298
- var tableTop = getRefTop(tableElem);
299
- var tableBottom = tableTop + tableElem.clientHeight;
300
- var shouldSticky = shouldHeaderStick(scrollTop, tableTop, tableBottom, refElem.clientHeight);
301
- var shouldPin = shouldHeaderPinBottom(scrollTop, tableBottom, refElem.clientHeight);
302
- var stickyMode = 'none';
303
- if (shouldPin) {
304
- stickyMode = 'pin-bottom';
305
- } else if (shouldSticky) {
306
- stickyMode = 'stick';
307
- }
308
- if (_this.state.stickyMode !== stickyMode) {
309
- _this.setState({
310
- stickyMode: stickyMode
311
- });
312
- }
313
- _this.nextFrame = undefined;
314
- });
315
- _defineProperty(_this, "onScroll", function () {
316
- if (!_this.nextFrame) {
317
- _this.nextFrame = requestAnimationFrame(_this.updateSticky);
318
- }
319
- });
320
- _defineProperty(_this, "onWrapperScrolled", function () {
321
- if (!_this.wrapperRef.current || !_this.stickyWrapperRef.current) {
322
- return;
323
- }
324
- _this.stickyWrapperRef.current.scrollLeft = _this.wrapperRef.current.scrollLeft;
325
- if (_this.stickyScrollbarRef.current) {
326
- _this.stickyScrollbarRef.current.scrollLeft = _this.wrapperRef.current.scrollLeft;
327
- }
328
- });
329
- _defineProperty(_this, "grabFirstRowRef", function (children) {
330
- // Ignored via go/ees005
331
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
332
- return React.Children.map(children || false, function (child, idx) {
333
- if (idx === 0 && /*#__PURE__*/React.isValidElement(child)) {
334
- return /*#__PURE__*/React.cloneElement(child, {
335
- innerRef: _this.stickyHeaderRef
336
- });
337
- }
338
- return child;
339
- });
340
- });
341
- return _this;
342
- }
343
- _inherits(TableContainer, _React$Component);
344
- return _createClass(TableContainer, [{
345
- key: "isInsideNestedRenderer",
346
- value:
347
- /**
348
- * Checks if this table is inside a nested renderer (e.g. Include Page macro)
349
- * by looking for multiple .ak-renderer-document ancestors in the DOM.
350
- * The result is cached since a table's position in the DOM tree is stable after mount.
351
- */
352
- function isInsideNestedRenderer() {
353
- if (this._isInsideNestedRenderer !== null) {
354
- return this._isInsideNestedRenderer;
355
- }
356
- if (!this.containerRef) {
357
- return false;
358
- }
359
- var docAncestorCount = 0;
360
- var el = this.containerRef.parentElement;
361
- while (el) {
362
- if (el.classList.contains(RendererCssClassName.DOCUMENT)) {
363
- docAncestorCount++;
364
- if (docAncestorCount >= 2) {
365
- this._isInsideNestedRenderer = true;
366
- return true;
367
- }
368
- }
369
- el = el.parentElement;
370
- }
371
- this._isInsideNestedRenderer = false;
372
- return false;
373
- }
374
-
375
- /**
376
- * Checks if this table is inside a table cell in the DOM. The result is cached
377
- * since a table's position in the DOM tree is stable after mount.
378
- */
379
- }, {
380
- key: "isInsideTableCell",
381
- value: function isInsideTableCell() {
382
- if (this._isInsideTableCell !== null) {
383
- return this._isInsideTableCell;
384
- }
385
- if (!this.containerRef) {
386
- return false;
387
- }
388
- this._isInsideTableCell = Boolean(this.containerRef.closest('td, th'));
389
- return this._isInsideTableCell;
390
- }
391
- }, {
392
- key: "isInsideTableContext",
393
- value: function isInsideTableContext() {
394
- return Boolean(this.props.isInsideOfTable || this.isInsideTableCell());
395
- }
396
-
397
- /**
398
- * For tables inside nested renderers (e.g. Include Page macro), the parent
399
- * renderer's CSS override forces width:100%!important and left:0!important
400
- * which overrides the inline styles set by this component. Using
401
- * style.setProperty with 'important' priority on inline styles beats
402
- * stylesheet !important rules per the CSS cascade.
403
- *
404
- * Tables that are nested inside another table need to remain constrained by
405
- * their table-cell context. Do not promote their width to inline !important,
406
- * otherwise nested tables rendered through macros such as Excerpt Include can
407
- * overflow and overlap adjacent cells.
408
- *
409
- * Top-level tables in nested renderers still preserve their saved width, but
410
- * are capped to their containing block so wide tables do not escape constrained
411
- * macro bodies such as Excerpt Include panels.
412
- *
413
- * Uses lastComputedStyle (populated during render) rather than reading from
414
- * element.style, because React may remove properties from the DOM when their
415
- * values transition to undefined between renders.
416
- *
417
- * `platform_nested_table_style_override_2` fixes a follow-up regression where a
418
- * NON-resized table inside an Excerpt macro (not Excerpt Include) on a
419
- * wide/full-width page shrinks to only show its first columns in the renderer.
420
- * Inside a nested renderer (a macro body) a non-resized table's computed width
421
- * is a default layout cap (760px/1800px, or a `cqw` length for full-page
422
- * appearances) taken from the outer renderer's width context. That value does
423
- * not match the macro's own box, so promoting it to inline `!important` makes
424
- * the table collapse. Such tables have no author-chosen size to preserve, so
425
- * under this gate we re-assert the parent stylesheet's intent (fill the box:
426
- * `width: 100%; left: 0`) with inline `!important`.
427
- *
428
- * Explicitly resized tables (`tableNode.attrs.width` set) are excluded and keep
429
- * the original PGXT-10226 behavior: their author-chosen width/left is promoted
430
- * verbatim so the Include Page macro does not stretch or indent them. The
431
- * table-cell short-circuit (PGXT-10294) above also still applies.
432
- */
433
- }, {
434
- key: "applyNestedRendererTableFix",
435
- value: function applyNestedRendererTableFix() {
436
- var _this$props$tableNode;
437
- if (!this.containerRef || !fg('platform_nested_table_style_override')) {
438
- return;
439
- }
440
- if (!this.isInsideNestedRenderer() || this.isInsideTableContext()) {
441
- return;
442
- }
443
- var _this$lastComputedSty = this.lastComputedStyle,
444
- width = _this$lastComputedSty.width,
445
- left = _this$lastComputedSty.left,
446
- marginLeft = _this$lastComputedSty.marginLeft;
447
- var style = this.containerRef.style;
448
-
449
- // A table is "explicitly resized" when the author set a width on the node.
450
- // Non-resized tables instead take a default layout cap (e.g. 760px/1800px)
451
- // derived from the outer renderer's appearance.
452
- var isExplicitlyResized = Boolean((_this$props$tableNode = this.props.tableNode) === null || _this$props$tableNode === void 0 ? void 0 : _this$props$tableNode.attrs.width);
453
- if (!isExplicitlyResized && fg('platform_nested_table_style_override_2')) {
454
- // PGXT-10421: For a NON-resized table inside a nested renderer (e.g. an
455
- // Excerpt macro body), the computed width is a default layout cap
456
- // (760px/1800px, or a `cqw` length for full-page appearances) taken from
457
- // the *outer* renderer's width context. That value does not match the
458
- // macro's own box, so promoting it to inline `!important` makes the table
459
- // ignore the available space and collapse to its first columns.
460
- //
461
- // These tables have no author-chosen size to preserve, so re-assert the
462
- // parent stylesheet's intent — fill the available box (`width: 100%`) —
463
- // with inline `!important` priority so it survives React re-renders and
464
- // wins over the stylesheet rule that leaks into nested renderers.
465
- style.setProperty('width', '100%', 'important');
466
- style.setProperty('max-width', '100%', 'important');
467
- style.setProperty('left', '0', 'important');
468
- style.setProperty('margin-left', '0', 'important');
469
- return;
470
- }
471
-
472
- // PGXT-10226: An explicitly resized table inside a nested renderer (e.g.
473
- // Include Page macro) must keep its author-chosen width and position. The
474
- // parent stylesheet forces `width: 100% !important; left: 0 !important`,
475
- // which would stretch and indent it, so we promote the component's own
476
- // computed width/left with inline `!important` to win the cascade.
477
- style.setProperty('width', width || 'auto', 'important');
478
- style.setProperty('max-width', '100%', 'important');
479
- style.setProperty('left', left || 'auto', 'important');
480
- style.setProperty('margin-left', marginLeft || '0', 'important');
481
- }
482
- }, {
483
- key: "componentDidMount",
484
- value:
485
- /**
486
- * Starts observing table dimensions and wires sticky header/scrollbar behavior after mount.
487
- *
488
- * @example
489
- */
490
- function componentDidMount() {
491
- this.resizeObserver = new ResizeObserver(this.applyResizerChange);
492
- if (this.wrapperRef.current) {
493
- this.resizeObserver.observe(this.wrapperRef.current);
494
- }
495
- if (this.stickyHeaderRef.current) {
496
- this.resizeObserver.observe(this.stickyHeaderRef.current);
497
- }
498
- if (this.props.stickyHeaders) {
499
- var _this$props$stickyHea;
500
- this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea = this.props.stickyHeaders) === null || _this$props$stickyHea === void 0 ? void 0 : _this$props$stickyHea.defaultScrollRootId_DO_NOT_USE);
501
- // Ignored via go/ees005
502
- // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
503
- this.overflowParent.addEventListener('scroll', this.onScroll);
504
- }
505
- if (this.wrapperRef.current && isStickyScrollbarEnabled(this.props.rendererAppearance)) {
506
- this.stickyScrollbar = new TableStickyScrollbar(this.wrapperRef.current);
507
- }
508
- this.applyNestedRendererTableFix();
509
- }
510
-
511
- /**
512
- * Updates sticky header wiring and scroll synchronization after prop or state changes.
513
- *
514
- * @param prevProps
515
- * @param prevState
516
- * @example
517
- */
518
- }, {
519
- key: "componentDidUpdate",
520
- value: function componentDidUpdate(prevProps, prevState) {
521
- // toggling sticky headers visiblity
522
- if (this.props.stickyHeaders && !this.overflowParent) {
523
- var _this$props$stickyHea2;
524
- this.overflowParent = OverflowParent.fromElement(this.tableRef.current, (_this$props$stickyHea2 = this.props.stickyHeaders) === null || _this$props$stickyHea2 === void 0 ? void 0 : _this$props$stickyHea2.defaultScrollRootId_DO_NOT_USE);
525
- } else if (!this.props.stickyHeaders && this.overflowParent) {
526
- // Ignored via go/ees005
527
- // eslint-disable-next-line @repo/internal/dom-events/no-unsafe-event-listeners
528
- this.overflowParent.removeEventListener('scroll', this.onScroll);
529
- this.overflowParent = null;
530
- }
531
-
532
- // offsetTop might have changed, re-position sticky header
533
- if (this.props.stickyHeaders !== prevProps.stickyHeaders) {
534
- this.updateSticky();
535
- }
536
-
537
- // sync horizontal scroll in floating div when toggling modes
538
- if (prevState.stickyMode !== this.state.stickyMode) {
539
- this.onWrapperScrolled();
540
- }
541
-
542
- // React re-applies the style prop on every render, which overwrites the
543
- // !important priorities set at mount time. Re-apply after each update.
544
- this.applyNestedRendererTableFix();
545
- }
546
- }, {
547
- key: "pinTop",
548
- get:
549
- /**
550
- * Calculates the top offset used when the sticky header is pinned to the table bottom.
551
- */
552
- function get() {
553
- if (!this.tableRef.current || !this.stickyHeaderRef.current) {
554
- return;
555
- }
556
- return this.tableRef.current.offsetHeight - this.stickyHeaderRef.current.offsetHeight + tableMarginTop - tableStickyPadding;
557
- }
558
-
559
- /**
560
- * Determines whether sticky header positioning should include the default scroll root offset.
561
- */
562
- }, {
563
- key: "shouldAddOverflowParentOffsetTop_DO_NOT_USE",
564
- get: function get() {
565
- // IF the StickyHeaderConfig specifies that the default scroll root offsetTop should be added
566
- // AND the StickyHeaderConfig specifies a default scroll root id
567
- // AND the OverflowParent is the corresponding element
568
- // THEN we should add the OverflowParent offset top (RETURN TRUE)
569
- return this.props.stickyHeaders && !!this.props.stickyHeaders.shouldAddDefaultScrollRootOffsetTop_DO_NOT_USE && !!this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE && this.overflowParent && this.overflowParent.id === this.props.stickyHeaders.defaultScrollRootId_DO_NOT_USE;
570
- }
571
-
572
- /**
573
- * Resolves the top position for the sticky header based on the current sticky mode.
574
- */
575
- }, {
576
- key: "stickyTop",
577
- get: function get() {
578
- switch (this.state.stickyMode) {
579
- case 'pin-bottom':
580
- return this.pinTop;
581
- case 'stick':
582
- var offsetTop = this.props.stickyHeaders && this.props.stickyHeaders.offsetTop;
583
- if (typeof offsetTop === 'number' && this.shouldAddOverflowParentOffsetTop_DO_NOT_USE) {
584
- var overflowParentOffsetTop = this.overflowParent ? this.overflowParent.top : 0;
585
- return offsetTop + overflowParentOffsetTop;
586
- } else {
587
- return offsetTop;
588
- }
589
- default:
590
- return undefined;
591
- }
592
- }
593
-
594
- /**
595
- * Renders the table container, sticky header, table content, sticky scrollbar, and synced block borders.
596
- *
597
- * @example
598
- */
599
- }, {
600
- key: "render",
601
- value: function render() {
602
- var _this$tableRef$curren;
603
- var _this$props = this.props,
604
- isNumberColumnEnabled = _this$props.isNumberColumnEnabled,
605
- layout = _this$props.layout,
606
- columnWidths = _this$props.columnWidths,
607
- stickyHeaders = _this$props.stickyHeaders,
608
- tableNode = _this$props.tableNode,
609
- rendererAppearance = _this$props.rendererAppearance,
610
- isInsideOfBlockNode = _this$props.isInsideOfBlockNode,
611
- isInsideOfNestedRenderer = _this$props.isInsideOfNestedRenderer,
612
- isInsideOfTable = _this$props.isInsideOfTable,
613
- isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension,
614
- allowTableAlignment = _this$props.allowTableAlignment,
615
- allowTableResizing = _this$props.allowTableResizing,
616
- isPresentational = _this$props.isPresentational,
617
- allowFixedColumnWidthOption = _this$props.allowFixedColumnWidthOption;
618
- var stickyMode = this.state.stickyMode;
619
- var lineLengthFixedWidth = akEditorDefaultLayoutWidth;
620
- var updatedLayout;
621
- var fullPageRendererWidthCSS = editorExperiment('platform_editor_preview_panel_responsiveness', true, {
622
- exposure: true
623
- }) ? 'calc(100cqw - var(--ak-renderer--full-page-gutter) * 2)' : "100cqw - ".concat(FullPagePadding, "px * 2");
624
- var renderWidthCSS = rendererAppearance === 'full-page' ? fullPageRendererWidthCSS : "100cqw";
625
- var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
626
- if (rendererAppearance === 'max' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) {
627
- return "min(".concat(akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
628
- } else if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
629
- return "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
630
- } else if (rendererAppearance === 'comment' && allowTableResizing && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
631
- return renderWidthCSS;
632
- } else {
633
- // custom width, or width mapped to breakpoint
634
- var tableContainerWidth = getTableContainerWidth(tableNode);
635
- return "min(".concat(tableContainerWidth, "px, ").concat(renderWidthCSS, ")");
636
- }
637
- };
638
- var tableWidthCSS = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
639
-
640
- // Logic for table alignment in renderer
641
- var isTableAlignStart = tableNode && tableNode.attrs && tableNode.attrs.layout === 'align-start' && allowTableAlignment;
642
- var fullWidthLineLengthCSS = "min(".concat(akEditorFullWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
643
- var maxWidthLineLengthCSS = "min(".concat(akEditorMaxWidthLayoutWidth, "px, ").concat(renderWidthCSS, ")");
644
- var isCommentAppearanceAndTableAlignmentEnabled = isCommentAppearance(rendererAppearance) && allowTableAlignment;
645
- var lineLengthCSS = isFullWidthAppearance(rendererAppearance) ? fullWidthLineLengthCSS : isMaxWidthAppearance(rendererAppearance) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) ? maxWidthLineLengthCSS : isCommentAppearanceAndTableAlignmentEnabled ? renderWidthCSS : "".concat(lineLengthFixedWidth, "px");
646
- var tableWidthNew = getTableContainerWidth(tableNode);
647
- var shouldCalculateLeftForAlignment = !isInsideOfBlockNode && !isInsideOfTable && isTableAlignStart && (isFullPageAppearance(rendererAppearance) && tableWidthNew <= lineLengthFixedWidth || isFullWidthAppearance(rendererAppearance) || isMaxWidthAppearance(rendererAppearance) && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true)) || isCommentAppearanceAndTableAlignmentEnabled);
648
- var leftCSS;
649
- if (shouldCalculateLeftForAlignment) {
650
- leftCSS = "(".concat(tableWidthCSS, " - ").concat(lineLengthCSS, ") / 2");
651
- }
652
- if (!shouldCalculateLeftForAlignment && isFullPageAppearance(rendererAppearance)) {
653
- // Note tableWidthCSS here is the renderer width
654
- // When the screen is super wide we want table to break out.
655
- // However if screen is smaller than 760px. We want table align to left.
656
- leftCSS = "min(0px, ".concat(lineLengthCSS, " - ").concat(tableWidthCSS, ") / 2");
657
- }
658
- var children = React.Children.toArray(this.props.children);
659
-
660
- // Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
661
- // This check caters for those tables and helps with SSR logic
662
- var isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
663
- if (isFullWidth) {
664
- updatedLayout = 'full-width';
665
- // if table has width explicity set, ensure SSR is handled
666
- } else if (tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) {
667
- updatedLayout = 'custom';
668
- } else {
669
- updatedLayout = layout;
670
- }
671
- var finalTableContainerWidth = allowTableResizing ? tableWidthNew : 'inherit';
672
-
673
- // We can only use CSS to determine the width when we have a known width in container.
674
- // When appearance is full-page, full-width or comment we use CSS based width calculation.
675
- // Otherwise it's fixed table width (customized width) or inherit.
676
- if (rendererAppearance === 'full-page' || rendererAppearance === 'full-width' || rendererAppearance === 'max' && (expValEquals('editor_tinymce_full_width_mode', 'isEnabled', true) || expValEquals('confluence_max_width_content_appearance', 'isEnabled', true))) {
677
- finalTableContainerWidth = allowTableResizing ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
678
- }
679
- if (rendererAppearance === 'comment' && allowTableResizing && !allowTableAlignment) {
680
- // If table alignment is disabled and table width is akEditorDefaultLayoutWidth = 760,
681
- // it is most likely a table created before "Support Table in Comments" FF was enabled
682
- // and we would see a bug ED-24795. A table created before "Support Table in Comments",
683
- // should inhirit the width of the renderer container.
684
-
685
- // !NOTE: it a table resized to 760 is copied from 'full-page' editor and pasted in comment editor
686
- // where (allowTableResizing && !allowTableAlignment), the table will loose 760px width.
687
- finalTableContainerWidth = tableNode !== null && tableNode !== void 0 && tableNode.attrs.width && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width) !== akEditorDefaultLayoutWidth ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
688
- }
689
- if (rendererAppearance === 'comment' && allowTableResizing && allowTableAlignment) {
690
- // If table alignment is enabled and layout is not 'align-start' or 'center', we are loading a table that was
691
- // created before "Support Table in Comments" FF was enabled. So the table should have the same width as renderer container
692
- // instead of 760 that was set on tableNode when the table had been published.
693
- finalTableContainerWidth = ((tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'align-start' || (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout) === 'center') && tableNode !== null && tableNode !== void 0 && tableNode.attrs.width ? "calc(".concat(tableWidthCSS, ")") : 'inherit';
694
- }
695
- var isContentModeTable = isTableInContentMode({
696
- tableNode: tableNode,
697
- isSupported: isContentModeSupported({
698
- allowTableResizing: allowTableResizing,
699
- rendererAppearance: rendererAppearance
700
- }),
701
- isTableNested: isInsideOfBlockNode || isInsideOfNestedRenderer || isInsideOfTable
702
- }) && expValEquals('platform_editor_table_fit_to_content_auto_convert', 'isEnabled', true);
703
- var style = _objectSpread(_objectSpread({}, isContentModeTable && {
704
- '--renderer-table-max-width': renderWidthCSS
705
- }), {}, {
706
- width: finalTableContainerWidth,
707
- left: leftCSS ? "calc(".concat(leftCSS, ")") : undefined,
708
- marginLeft: shouldCalculateLeftForAlignment && leftCSS !== undefined ? "calc(-1 * (".concat(leftCSS, "))") : undefined
709
- });
710
-
711
- // Store computed style values for applyNestedRendererTableFix() to use.
712
- // Reading from props rather than the DOM ensures correctness when React
713
- // removes properties (transitions from set to undefined) between renders.
714
- this.lastComputedStyle = {
715
- width: typeof style.width === 'number' ? "".concat(style.width, "px") : style.width,
716
- left: style.left,
717
- marginLeft: style.marginLeft
718
- };
719
- return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
720
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
721
- className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
722
- "data-layout": updatedLayout,
723
- "data-testid": "table-container",
724
- ref: this.setContainerRef,
725
- style: style
726
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
727
- }, isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
728
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
729
- className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_TOP,
730
- "data-testid": "sticky-scrollbar-sentinel-top"
731
- }), stickyHeaders && tableNode && !isContentModeTable && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
732
- isNumberColumnEnabled: isNumberColumnEnabled,
733
- tableWidth: "inherit",
734
- renderWidth: 0,
735
- layout: layout,
736
- handleRef: this.props.handleRef,
737
- shadowClassNames: this.props.shadowClassNames,
738
- top: this.stickyTop,
739
- mode: stickyMode,
740
- innerRef: this.stickyWrapperRef,
741
- wrapperWidth: this.state.wrapperWidth,
742
- columnWidths: columnWidths,
743
- rowHeight: this.state.headerRowHeight,
744
- tableNode: tableNode,
745
- rendererAppearance: rendererAppearance,
746
- allowTableResizing: allowTableResizing,
747
- fixTableSSRResizing: true,
748
- allowFixedColumnWidthOption: allowFixedColumnWidthOption
749
- }, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
750
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
751
- className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
752
- ref: this.wrapperRef,
753
- "data-number-column": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.isNumberColumnEnabled,
754
- "data-layout": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.layout,
755
- "data-autosize": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.__autoSize,
756
- "data-table-local-id": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.localId,
757
- "data-table-width": tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width,
758
- "data-vc": "table-node-wrapper",
759
- onScroll: this.props.stickyHeaders && this.onWrapperScrolled
760
- }, /*#__PURE__*/React.createElement(Table, {
761
- innerRef: this.tableRef,
762
- columnWidths: columnWidths,
763
- layout: layout,
764
- renderWidth: 0,
765
- isNumberColumnEnabled: isNumberColumnEnabled,
766
- tableNode: tableNode,
767
- rendererAppearance: rendererAppearance,
768
- isInsideOfBlockNode: isInsideOfBlockNode,
769
- isInsideOfNestedRenderer: isInsideOfNestedRenderer,
770
- isInsideOfTable: isInsideOfTable,
771
- isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
772
- allowTableResizing: allowTableResizing,
773
- isPresentational: isPresentational,
774
- allowFixedColumnWidthOption: allowFixedColumnWidthOption
775
- }, this.grabFirstRowRef(children))), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
776
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
777
- className: "".concat(TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_CONTAINER).concat(fg('confluence_frontend_table_scrollbar_ttvc_fix') ? '-view-page' : ''),
778
- ref: this.stickyScrollbarRef,
779
- "data-vc": "table-sticky-scrollbar-container",
780
- style: fg('confluence_frontend_table_scrollbar_ttvc_fix') ? _objectSpread(_objectSpread({}, stickyContainerBaseStyles), stickyContainerAdditionalStyles) : stickyContainerBaseStyles
781
- }, /*#__PURE__*/React.createElement("div", {
782
- style: {
783
- width: fg('confluence_frontend_table_scrollbar_ttvc_fix') ? '100%' : (_this$tableRef$curren = this.tableRef.current) === null || _this$tableRef$curren === void 0 ? void 0 : _this$tableRef$curren.clientWidth,
784
- // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
785
- height: '100%'
786
- }
787
- })), isStickyScrollbarEnabled(this.props.rendererAppearance) && /*#__PURE__*/React.createElement("div", {
788
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
789
- className: TableSharedCssClassName.TABLE_STICKY_SCROLLBAR_SENTINEL_BOTTOM,
790
- "data-testid": "sticky-scrollbar-sentinel-bottom"
791
- }), /*#__PURE__*/React.createElement(RefSyncBlockFakeBorders, {
792
- isNumberColumnEnabled: isNumberColumnEnabled
793
- })));
794
- }
795
- }]);
796
- }(React.Component);
797
- var getCellEdgePropsByCellOffset = function getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled) {
798
- var cellEdgePropsByCellOffset = new Map();
799
- var cellRightByCellOffset = new Map();
800
- var occupiedGrid = [];
801
- var tableWidth = 0;
802
- var cellOffset = 0;
803
- tableNode.forEach(function (rowNode, _rowOffset, rowIndex) {
804
- var _occupiedGrid$rowInde;
805
- occupiedGrid[rowIndex] = (_occupiedGrid$rowInde = occupiedGrid[rowIndex]) !== null && _occupiedGrid$rowInde !== void 0 ? _occupiedGrid$rowInde : [];
806
- var columnIndex = 0;
807
- cellOffset += 1;
808
- rowNode.forEach(function (cellNode) {
809
- while (occupiedGrid[rowIndex][columnIndex]) {
810
- columnIndex += 1;
811
- }
812
- var colspan = cellNode.attrs.colspan || 1;
813
- var rowspan = cellNode.attrs.rowspan || 1;
814
- var cellLeft = columnIndex;
815
- var cellRight = cellLeft + colspan;
816
- var cellTop = rowIndex;
817
- var cellBottom = cellTop + rowspan;
818
- for (var row = cellTop; row < cellBottom; row += 1) {
819
- var _occupiedGrid$row;
820
- occupiedGrid[row] = (_occupiedGrid$row = occupiedGrid[row]) !== null && _occupiedGrid$row !== void 0 ? _occupiedGrid$row : [];
821
- for (var column = cellLeft; column < cellRight; column += 1) {
822
- occupiedGrid[row][column] = true;
823
- }
824
- }
825
- tableWidth = Math.max(tableWidth, cellRight);
826
- cellRightByCellOffset.set(cellOffset, cellRight);
827
- cellEdgePropsByCellOffset.set(cellOffset, {
828
- reachesBottom: cellBottom >= tableNode.childCount,
829
- // With number column enabled, PM column 0 is not visually leftmost and must not get `data-reaches-left`.
830
- reachesLeft: cellLeft === 0 && !isNumberColumnEnabled,
831
- reachesRight: false,
832
- reachesTop: cellTop === 0
833
- });
834
- columnIndex = cellRight;
835
- cellOffset += cellNode.nodeSize;
836
- });
837
- cellOffset += 1;
838
- });
839
- cellRightByCellOffset.forEach(function (cellRight, currentCellOffset) {
840
- var edgeProps = cellEdgePropsByCellOffset.get(currentCellOffset);
841
- if (edgeProps) {
842
- edgeProps.reachesRight = cellRight >= tableWidth;
843
- }
844
- });
845
- return cellEdgePropsByCellOffset;
846
- };
847
- var isRenderedTableCell = function isRenderedTableCell(element) {
848
- var _ref4 = element.props,
849
- nodeType = _ref4.nodeType;
850
- return nodeType === 'tableCell' || nodeType === 'tableHeader' || element.type === TableCell || element.type === TableHeader;
851
- };
852
- var addTableCellEdgePropsThroughWrappers = function addTableCellEdgePropsThroughWrappers(rows, tableNode, isNumberColumnEnabled) {
853
- try {
854
- if (!tableNode) {
855
- return rows;
856
- }
857
- var cellEdgePropsByCellOffset = getCellEdgePropsByCellOffset(tableNode, isNumberColumnEnabled);
858
- var cellOffset = 0;
859
- return React.Children.map(rows, function (row, rowIndex) {
860
- var rowNode = tableNode.child(rowIndex);
861
- cellOffset += 1;
862
- var cellIndex = 0;
863
- var _addEdgePropsToRenderedCells = function addEdgePropsToRenderedCells(element) {
864
- if (isRenderedTableCell(element)) {
865
- var cellNode = rowNode.child(cellIndex);
866
- var edgeProps = cellEdgePropsByCellOffset.get(cellOffset);
867
- cellIndex += 1;
868
- cellOffset += cellNode.nodeSize;
869
- return edgeProps ? /*#__PURE__*/React.cloneElement(element, edgeProps) : element;
870
- }
871
- var _ref5 = element.props,
872
- children = _ref5.children;
873
- if (children === undefined) {
874
- return element;
875
- }
876
- var childrenWithEdgeProps = React.Children.map(children, function (child) {
877
- return /*#__PURE__*/React.isValidElement(child) ? _addEdgePropsToRenderedCells(child) : child;
878
- });
879
- return /*#__PURE__*/React.cloneElement(element, undefined, childrenWithEdgeProps);
880
- };
881
- var rowWithEdgeProps = _addEdgePropsToRenderedCells(row);
882
- if (cellIndex !== rowNode.childCount) {
883
- throw new Error('Rendered table row does not match its document node');
884
- }
885
- cellOffset += 1;
886
- return rowWithEdgeProps;
887
- });
888
- } catch (_unused) {
889
- // Renderer can receive malformed historical ADF. If the table shape cannot
890
- // be described safely, keep rendering without rounded edge metadata.
891
- return rows;
892
- }
893
- };
894
-
895
- /**
896
- * Processes table children before passing them to the styled table container.
897
- */
898
- // Ignored via go/ees005
899
- // eslint-disable-next-line @repo/internal/react/no-class-components
900
- export var TableProcessorWithContainerStyles = /*#__PURE__*/function (_React$Component2) {
901
- function TableProcessorWithContainerStyles() {
902
- var _this2;
903
- _classCallCheck(this, TableProcessorWithContainerStyles);
904
- for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
905
- args[_key2] = arguments[_key2];
906
- }
907
- _this2 = _callSuper(this, TableProcessorWithContainerStyles, [].concat(args));
908
- _defineProperty(_this2, "state", {
909
- tableOrderStatus: undefined
910
- });
911
- // adds sortable + re-orders children
912
- _defineProperty(_this2, "addSortableColumn", function (childrenArray) {
913
- var _this2$props = _this2.props,
914
- tableNode = _this2$props.tableNode,
915
- allowColumnSorting = _this2$props.allowColumnSorting,
916
- smartCardStorage = _this2$props.smartCardStorage;
917
- var tableOrderStatus = _this2.state.tableOrderStatus;
918
- if (allowColumnSorting && isHeaderRowEnabled(childrenArray) && tableNode && !hasMergedCell(tableNode)) {
919
- return addSortableColumn(orderChildren(childrenArray, tableNode, smartCardStorage, tableOrderStatus), tableOrderStatus, _this2.changeSortOrder);
920
- }
921
- return childrenArray;
922
- });
923
- _defineProperty(_this2, "changeSortOrder", function (columnIndex, sortOrder) {
924
- _this2.setState({
925
- tableOrderStatus: {
926
- columnIndex: columnIndex,
927
- order: sortOrder
928
- }
929
- });
930
- });
931
- // Ignored via go/ees005
932
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
933
- _defineProperty(_this2, "addNumberColumnIndexes", function (rows) {
934
- var isNumberColumnEnabled = _this2.props.isNumberColumnEnabled;
935
- var headerRowEnabled = isHeaderRowEnabled(rows);
936
- var lastRowIndex = React.Children.count(rows) - 1;
937
- return React.Children.map(rows, function (row, index) {
938
- return /*#__PURE__*/React.cloneElement(React.Children.only(row), {
939
- isNumberColumnEnabled: isNumberColumnEnabled,
940
- index: headerRowEnabled ? index === 0 ? '' : index : index + 1,
941
- isFirstRow: index === 0,
942
- isLastRow: index === lastRowIndex
943
- });
944
- });
945
- });
946
- return _this2;
947
- }
948
- _inherits(TableProcessorWithContainerStyles, _React$Component2);
949
- return _createClass(TableProcessorWithContainerStyles, [{
950
- key: "render",
951
- value:
952
- /**
953
- * Renders processed table children inside the table container.
954
- *
955
- * @example
956
- */
957
- function render() {
958
- var _this$props2 = this.props,
959
- allowColumnSorting = _this$props2.allowColumnSorting,
960
- allowFixedColumnWidthOption = _this$props2.allowFixedColumnWidthOption,
961
- allowTableAlignment = _this$props2.allowTableAlignment,
962
- allowTableResizing = _this$props2.allowTableResizing,
963
- children = _this$props2.children,
964
- columnWidths = _this$props2.columnWidths,
965
- disableTableOverflowShadow = _this$props2.disableTableOverflowShadow,
966
- handleRef = _this$props2.handleRef,
967
- isinsideMultiBodiedExtension = _this$props2.isinsideMultiBodiedExtension,
968
- isInsideOfBlockNode = _this$props2.isInsideOfBlockNode,
969
- isInsideOfNestedRenderer = _this$props2.isInsideOfNestedRenderer,
970
- isInsideOfTable = _this$props2.isInsideOfTable,
971
- isNumberColumnEnabled = _this$props2.isNumberColumnEnabled,
972
- isPresentational = _this$props2.isPresentational,
973
- layout = _this$props2.layout,
974
- rendererAppearance = _this$props2.rendererAppearance,
975
- renderWidth = _this$props2.renderWidth,
976
- shadowClassNames = _this$props2.shadowClassNames,
977
- smartCardStorage = _this$props2.smartCardStorage,
978
- stickyHeaders = _this$props2.stickyHeaders,
979
- tabIndex = _this$props2.tabIndex,
980
- tableNode = _this$props2.tableNode;
981
- if (!children) {
982
- return null;
983
- }
984
- var childrenArray = React.Children.toArray(children);
985
- var childrenWithTableEdgeProps = expValEquals('platform_editor_table_q4_loveability', 'isEnabled', true) ? addTableCellEdgePropsThroughWrappers(childrenArray, tableNode, isNumberColumnEnabled) : childrenArray;
986
- var orderedChildren = compose(this.addNumberColumnIndexes, this.addSortableColumn
987
- // @ts-expect-error TS2345: Argument of type '(ReactChild | ReactFragment | ReactPortal)[]' is not assignable to parameter of type 'ReactElement<any, string | JSXElementConstructor<any>>[]'
988
- )(childrenWithTableEdgeProps);
989
- return /*#__PURE__*/React.createElement(TableContainer, {
990
- allowColumnSorting: allowColumnSorting,
991
- allowFixedColumnWidthOption: allowFixedColumnWidthOption,
992
- allowTableAlignment: allowTableAlignment,
993
- allowTableResizing: allowTableResizing,
994
- columnWidths: columnWidths,
995
- disableTableOverflowShadow: disableTableOverflowShadow,
996
- handleRef: handleRef,
997
- isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
998
- isInsideOfBlockNode: isInsideOfBlockNode,
999
- isInsideOfNestedRenderer: isInsideOfNestedRenderer,
1000
- isInsideOfTable: isInsideOfTable,
1001
- isNumberColumnEnabled: isNumberColumnEnabled,
1002
- isPresentational: isPresentational,
1003
- layout: layout,
1004
- rendererAppearance: rendererAppearance,
1005
- renderWidth: renderWidth,
1006
- shadowClassNames: shadowClassNames,
1007
- smartCardStorage: smartCardStorage,
1008
- stickyHeaders: stickyHeaders,
1009
- tabIndex: tabIndex,
1010
- tableNode: tableNode
1011
- }, orderedChildren);
1012
- }
1013
- }]);
1014
- }(React.Component);