@atlaskit/renderer 137.1.8 → 137.1.10

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