@atlaskit/renderer 109.17.1 → 109.17.2
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.
- package/CHANGELOG.md +7 -0
- package/dist/cjs/react/nodes/table/colgroup.js +1 -17
- package/dist/cjs/react/nodes/table.js +9 -30
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/es2019/react/nodes/table/colgroup.js +2 -18
- package/dist/es2019/react/nodes/table.js +10 -31
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/esm/react/nodes/table/colgroup.js +2 -18
- package/dist/esm/react/nodes/table.js +10 -31
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/package.json +2 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 109.17.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#86368](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86368) [`8499e6f0fef4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8499e6f0fef4) - Remove custom-table-width feature flag
|
|
8
|
+
- Updated dependencies
|
|
9
|
+
|
|
3
10
|
## 109.17.1
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -15,16 +15,6 @@ var _table = require("../table");
|
|
|
15
15
|
// User A creates a table with column widths → User B views it on a smaller screen
|
|
16
16
|
// User A creates a table with column widths → User A views it with reduced viewport space (eg. Confluence sidebar is open)
|
|
17
17
|
var MAX_SCALING_PERCENT = 0.3;
|
|
18
|
-
var getTableLayoutWidth = function getTableLayoutWidth(layout) {
|
|
19
|
-
switch (layout) {
|
|
20
|
-
case 'full-width':
|
|
21
|
-
return _editorSharedStyles.akEditorFullWidthLayoutWidth;
|
|
22
|
-
case 'wide':
|
|
23
|
-
return _editorSharedStyles.akEditorWideLayoutWidth;
|
|
24
|
-
default:
|
|
25
|
-
return _editorSharedStyles.akEditorDefaultLayoutWidth;
|
|
26
|
-
}
|
|
27
|
-
};
|
|
28
18
|
var isTableResized = function isTableResized(columnWidths) {
|
|
29
19
|
var filteredWidths = columnWidths.filter(function (width) {
|
|
30
20
|
return width !== 0;
|
|
@@ -54,7 +44,6 @@ var calcScalePercent = exports.calcScalePercent = function calcScalePercent(_ref
|
|
|
54
44
|
};
|
|
55
45
|
var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
|
|
56
46
|
var columnWidths = props.columnWidths,
|
|
57
|
-
layout = props.layout,
|
|
58
47
|
isNumberColumnEnabled = props.isNumberColumnEnabled,
|
|
59
48
|
renderWidth = props.renderWidth,
|
|
60
49
|
tableNode = props.tableNode,
|
|
@@ -64,15 +53,10 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
|
|
|
64
53
|
if (!columnWidths) {
|
|
65
54
|
return [];
|
|
66
55
|
}
|
|
67
|
-
var tableContainerWidth;
|
|
68
56
|
var tableResized = isTableResized(columnWidths);
|
|
69
57
|
var noOfColumns = columnWidths.length;
|
|
70
58
|
var targetWidths;
|
|
71
|
-
|
|
72
|
-
tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
|
|
73
|
-
} else {
|
|
74
|
-
tableContainerWidth = getTableLayoutWidth(layout);
|
|
75
|
-
}
|
|
59
|
+
var tableContainerWidth = (0, _nodeWidth.getTableContainerWidth)(tableNode);
|
|
76
60
|
if ((0, _table.isTableResizingEnabled)(rendererAppearance) && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableResized) {
|
|
77
61
|
// for tables with no column widths defined, assume that the real table width
|
|
78
62
|
// is defined by node.attrs.width
|
|
@@ -19,7 +19,6 @@ var _ui = require("@atlaskit/editor-common/ui");
|
|
|
19
19
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
20
20
|
var _types = require("@atlaskit/editor-common/types");
|
|
21
21
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
22
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
23
22
|
var _nodeWidth = require("@atlaskit/editor-common/node-width");
|
|
24
23
|
var _style = require("../../ui/Renderer/style");
|
|
25
24
|
var _tableCell = require("./tableCell");
|
|
@@ -33,7 +32,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
33
32
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
34
33
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
35
34
|
var isTableResizingEnabled = exports.isTableResizingEnabled = function isTableResizingEnabled(appearance) {
|
|
36
|
-
return (0,
|
|
35
|
+
return (0, _appearance.isFullWidthOrFullPageAppearance)(appearance);
|
|
37
36
|
};
|
|
38
37
|
var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
|
|
39
38
|
if (!tableOrderStatus || tableOrderStatus.order === _types.SortOrder.NO_ORDER) {
|
|
@@ -299,7 +298,6 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
299
298
|
isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension;
|
|
300
299
|
var stickyMode = this.state.stickyMode;
|
|
301
300
|
var lineLength = _editorSharedStyles.akEditorDefaultLayoutWidth;
|
|
302
|
-
var tableWidth;
|
|
303
301
|
var left;
|
|
304
302
|
var updatedLayout;
|
|
305
303
|
|
|
@@ -307,8 +305,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
307
305
|
// Please consider changes below carefully to not negatively impact SSR
|
|
308
306
|
// `renderWidth` cannot be depended on during SSR
|
|
309
307
|
var isRenderWidthValid = !!renderWidth && renderWidth > 0;
|
|
310
|
-
var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(
|
|
311
|
-
if (rendererAppearance === 'full-width' && !tableNode.attrs.width) {
|
|
308
|
+
var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
|
|
309
|
+
if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
|
|
312
310
|
return isRenderWidthValid ? Math.min(_editorSharedStyles.akEditorFullWidthLayoutWidth, renderWidth) : _editorSharedStyles.akEditorFullWidthLayoutWidth;
|
|
313
311
|
} else {
|
|
314
312
|
// custom width, or width mapped to breakpoint
|
|
@@ -316,12 +314,8 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
316
314
|
return isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth;
|
|
317
315
|
}
|
|
318
316
|
};
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
} else {
|
|
322
|
-
tableWidth = (0, _styles.calcTableWidth)(layout, renderWidth, false);
|
|
323
|
-
}
|
|
324
|
-
if (canUseLinelength(rendererAppearance) && tableWidth !== 'inherit' && tableWidth > lineLength) {
|
|
317
|
+
var tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
|
|
318
|
+
if (canUseLinelength(rendererAppearance) && tableWidth > lineLength) {
|
|
325
319
|
left = lineLength / 2 - tableWidth / 2;
|
|
326
320
|
}
|
|
327
321
|
var children = _react.default.Children.toArray(this.props.children);
|
|
@@ -329,30 +323,15 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
329
323
|
// Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
|
|
330
324
|
// This check caters for those tables and helps with SSR logic
|
|
331
325
|
var isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
|
|
332
|
-
var hasCustomWidth = isTableResizingEnabled(rendererAppearance) && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width);
|
|
333
326
|
if (isFullWidth) {
|
|
334
327
|
updatedLayout = 'full-width';
|
|
335
|
-
|
|
328
|
+
// if table has width explicity set, ensure SSR is handled
|
|
329
|
+
} else if (tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) {
|
|
336
330
|
updatedLayout = 'custom';
|
|
337
331
|
} else {
|
|
338
332
|
updatedLayout = layout;
|
|
339
333
|
}
|
|
340
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null,
|
|
341
|
-
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
342
|
-
tableWidth: tableWidth,
|
|
343
|
-
layout: layout,
|
|
344
|
-
renderWidth: renderWidth,
|
|
345
|
-
handleRef: this.props.handleRef,
|
|
346
|
-
shadowClassNames: this.props.shadowClassNames,
|
|
347
|
-
top: this.stickyTop,
|
|
348
|
-
left: left,
|
|
349
|
-
mode: stickyMode,
|
|
350
|
-
innerRef: this.stickyWrapperRef,
|
|
351
|
-
wrapperWidth: this.state.wrapperWidth,
|
|
352
|
-
columnWidths: columnWidths,
|
|
353
|
-
rowHeight: this.state.headerRowHeight,
|
|
354
|
-
rendererAppearance: rendererAppearance
|
|
355
|
-
}, [children && children[0]]), /*#__PURE__*/_react.default.createElement("div", {
|
|
334
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
|
|
356
335
|
className: "".concat(_styles.TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
|
|
357
336
|
"data-layout": updatedLayout,
|
|
358
337
|
ref: this.props.handleRef,
|
|
@@ -361,7 +340,7 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
361
340
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
|
|
362
341
|
left: left
|
|
363
342
|
}
|
|
364
|
-
},
|
|
343
|
+
}, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/_react.default.createElement(_sticky.StickyTable, {
|
|
365
344
|
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
366
345
|
tableWidth: tableWidth,
|
|
367
346
|
layout: layout,
|
|
@@ -55,7 +55,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
|
|
|
55
55
|
var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
56
56
|
var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
57
57
|
var packageName = "@atlaskit/renderer";
|
|
58
|
-
var packageVersion = "109.17.
|
|
58
|
+
var packageVersion = "109.17.2";
|
|
59
59
|
var Renderer = exports.Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
60
60
|
(0, _inherits2.default)(Renderer, _PureComponent);
|
|
61
61
|
var _super = _createSuper(Renderer);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
3
|
-
import { akEditorTableNumberColumnWidth,
|
|
3
|
+
import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
|
|
4
4
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
5
5
|
import { isTableResizingEnabled } from '../table';
|
|
6
6
|
|
|
@@ -9,16 +9,6 @@ import { isTableResizingEnabled } from '../table';
|
|
|
9
9
|
// User A creates a table with column widths → User B views it on a smaller screen
|
|
10
10
|
// User A creates a table with column widths → User A views it with reduced viewport space (eg. Confluence sidebar is open)
|
|
11
11
|
const MAX_SCALING_PERCENT = 0.3;
|
|
12
|
-
const getTableLayoutWidth = layout => {
|
|
13
|
-
switch (layout) {
|
|
14
|
-
case 'full-width':
|
|
15
|
-
return akEditorFullWidthLayoutWidth;
|
|
16
|
-
case 'wide':
|
|
17
|
-
return akEditorWideLayoutWidth;
|
|
18
|
-
default:
|
|
19
|
-
return akEditorDefaultLayoutWidth;
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
12
|
const isTableResized = columnWidths => {
|
|
23
13
|
const filteredWidths = columnWidths.filter(width => width !== 0);
|
|
24
14
|
return !!filteredWidths.length;
|
|
@@ -48,7 +38,6 @@ export const calcScalePercent = ({
|
|
|
48
38
|
const renderScaleDownColgroup = props => {
|
|
49
39
|
let {
|
|
50
40
|
columnWidths,
|
|
51
|
-
layout,
|
|
52
41
|
isNumberColumnEnabled,
|
|
53
42
|
renderWidth,
|
|
54
43
|
tableNode,
|
|
@@ -59,15 +48,10 @@ const renderScaleDownColgroup = props => {
|
|
|
59
48
|
if (!columnWidths) {
|
|
60
49
|
return [];
|
|
61
50
|
}
|
|
62
|
-
let tableContainerWidth;
|
|
63
51
|
const tableResized = isTableResized(columnWidths);
|
|
64
52
|
const noOfColumns = columnWidths.length;
|
|
65
53
|
let targetWidths;
|
|
66
|
-
|
|
67
|
-
tableContainerWidth = getTableContainerWidth(tableNode);
|
|
68
|
-
} else {
|
|
69
|
-
tableContainerWidth = getTableLayoutWidth(layout);
|
|
70
|
-
}
|
|
54
|
+
const tableContainerWidth = getTableContainerWidth(tableNode);
|
|
71
55
|
if (isTableResizingEnabled(rendererAppearance) && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableResized) {
|
|
72
56
|
// for tables with no column widths defined, assume that the real table width
|
|
73
57
|
// is defined by node.attrs.width
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import React from 'react';
|
|
4
|
-
import {
|
|
4
|
+
import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
|
|
5
5
|
import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
|
|
6
6
|
import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
|
|
7
7
|
import { SortOrder } from '@atlaskit/editor-common/types';
|
|
8
8
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
9
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
10
9
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
11
10
|
import { FullPagePadding } from '../../ui/Renderer/style';
|
|
12
11
|
import { TableHeader } from './tableCell';
|
|
@@ -14,7 +13,7 @@ import { withSmartCardStorage } from '../../ui/SmartCardStorage';
|
|
|
14
13
|
import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky';
|
|
15
14
|
import { Table } from './table/table';
|
|
16
15
|
import { isFullWidthOrFullPageAppearance } from '../utils/appearance';
|
|
17
|
-
export const isTableResizingEnabled = appearance =>
|
|
16
|
+
export const isTableResizingEnabled = appearance => isFullWidthOrFullPageAppearance(appearance);
|
|
18
17
|
const orderChildren = (children, tableNode, smartCardStorage, tableOrderStatus) => {
|
|
19
18
|
if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
|
|
20
19
|
return children;
|
|
@@ -246,7 +245,6 @@ export class TableContainer extends React.Component {
|
|
|
246
245
|
stickyMode
|
|
247
246
|
} = this.state;
|
|
248
247
|
const lineLength = akEditorDefaultLayoutWidth;
|
|
249
|
-
let tableWidth;
|
|
250
248
|
let left;
|
|
251
249
|
let updatedLayout;
|
|
252
250
|
|
|
@@ -254,8 +252,8 @@ export class TableContainer extends React.Component {
|
|
|
254
252
|
// Please consider changes below carefully to not negatively impact SSR
|
|
255
253
|
// `renderWidth` cannot be depended on during SSR
|
|
256
254
|
const isRenderWidthValid = !!renderWidth && renderWidth > 0;
|
|
257
|
-
const calcDefaultLayoutWidthByAppearance = (
|
|
258
|
-
if (rendererAppearance === 'full-width' && !tableNode.attrs.width) {
|
|
255
|
+
const calcDefaultLayoutWidthByAppearance = (rendererAppearance, tableNode) => {
|
|
256
|
+
if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
|
|
259
257
|
return isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
|
|
260
258
|
} else {
|
|
261
259
|
// custom width, or width mapped to breakpoint
|
|
@@ -263,12 +261,8 @@ export class TableContainer extends React.Component {
|
|
|
263
261
|
return isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth;
|
|
264
262
|
}
|
|
265
263
|
};
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
} else {
|
|
269
|
-
tableWidth = calcTableWidth(layout, renderWidth, false);
|
|
270
|
-
}
|
|
271
|
-
if (canUseLinelength(rendererAppearance) && tableWidth !== 'inherit' && tableWidth > lineLength) {
|
|
264
|
+
const tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
|
|
265
|
+
if (canUseLinelength(rendererAppearance) && tableWidth > lineLength) {
|
|
272
266
|
left = lineLength / 2 - tableWidth / 2;
|
|
273
267
|
}
|
|
274
268
|
const children = React.Children.toArray(this.props.children);
|
|
@@ -276,30 +270,15 @@ export class TableContainer extends React.Component {
|
|
|
276
270
|
// Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
|
|
277
271
|
// This check caters for those tables and helps with SSR logic
|
|
278
272
|
const isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
|
|
279
|
-
const hasCustomWidth = isTableResizingEnabled(rendererAppearance) && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width);
|
|
280
273
|
if (isFullWidth) {
|
|
281
274
|
updatedLayout = 'full-width';
|
|
282
|
-
|
|
275
|
+
// if table has width explicity set, ensure SSR is handled
|
|
276
|
+
} else if (tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) {
|
|
283
277
|
updatedLayout = 'custom';
|
|
284
278
|
} else {
|
|
285
279
|
updatedLayout = layout;
|
|
286
280
|
}
|
|
287
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null,
|
|
288
|
-
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
289
|
-
tableWidth: tableWidth,
|
|
290
|
-
layout: layout,
|
|
291
|
-
renderWidth: renderWidth,
|
|
292
|
-
handleRef: this.props.handleRef,
|
|
293
|
-
shadowClassNames: this.props.shadowClassNames,
|
|
294
|
-
top: this.stickyTop,
|
|
295
|
-
left: left,
|
|
296
|
-
mode: stickyMode,
|
|
297
|
-
innerRef: this.stickyWrapperRef,
|
|
298
|
-
wrapperWidth: this.state.wrapperWidth,
|
|
299
|
-
columnWidths: columnWidths,
|
|
300
|
-
rowHeight: this.state.headerRowHeight,
|
|
301
|
-
rendererAppearance: rendererAppearance
|
|
302
|
-
}, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
|
|
281
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
303
282
|
className: `${TableSharedCssClassName.TABLE_CONTAINER} ${this.props.shadowClassNames || ''}`,
|
|
304
283
|
"data-layout": updatedLayout,
|
|
305
284
|
ref: this.props.handleRef,
|
|
@@ -308,7 +287,7 @@ export class TableContainer extends React.Component {
|
|
|
308
287
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
|
|
309
288
|
left
|
|
310
289
|
}
|
|
311
|
-
},
|
|
290
|
+
}, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
|
|
312
291
|
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
313
292
|
tableWidth: tableWidth,
|
|
314
293
|
layout: layout,
|
|
@@ -36,7 +36,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
|
|
|
36
36
|
export const NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
37
37
|
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
38
38
|
const packageName = "@atlaskit/renderer";
|
|
39
|
-
const packageVersion = "109.17.
|
|
39
|
+
const packageVersion = "109.17.2";
|
|
40
40
|
export class Renderer extends PureComponent {
|
|
41
41
|
constructor(props) {
|
|
42
42
|
super(props);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { tableCellBorderWidth, tableCellMinWidth } from '@atlaskit/editor-common/styles';
|
|
3
|
-
import { akEditorTableNumberColumnWidth,
|
|
3
|
+
import { akEditorTableNumberColumnWidth, akEditorTableLegacyCellMinWidth } from '@atlaskit/editor-shared-styles';
|
|
4
4
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
5
5
|
import { isTableResizingEnabled } from '../table';
|
|
6
6
|
|
|
@@ -9,16 +9,6 @@ import { isTableResizingEnabled } from '../table';
|
|
|
9
9
|
// User A creates a table with column widths → User B views it on a smaller screen
|
|
10
10
|
// User A creates a table with column widths → User A views it with reduced viewport space (eg. Confluence sidebar is open)
|
|
11
11
|
var MAX_SCALING_PERCENT = 0.3;
|
|
12
|
-
var getTableLayoutWidth = function getTableLayoutWidth(layout) {
|
|
13
|
-
switch (layout) {
|
|
14
|
-
case 'full-width':
|
|
15
|
-
return akEditorFullWidthLayoutWidth;
|
|
16
|
-
case 'wide':
|
|
17
|
-
return akEditorWideLayoutWidth;
|
|
18
|
-
default:
|
|
19
|
-
return akEditorDefaultLayoutWidth;
|
|
20
|
-
}
|
|
21
|
-
};
|
|
22
12
|
var isTableResized = function isTableResized(columnWidths) {
|
|
23
13
|
var filteredWidths = columnWidths.filter(function (width) {
|
|
24
14
|
return width !== 0;
|
|
@@ -48,7 +38,6 @@ export var calcScalePercent = function calcScalePercent(_ref) {
|
|
|
48
38
|
};
|
|
49
39
|
var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
|
|
50
40
|
var columnWidths = props.columnWidths,
|
|
51
|
-
layout = props.layout,
|
|
52
41
|
isNumberColumnEnabled = props.isNumberColumnEnabled,
|
|
53
42
|
renderWidth = props.renderWidth,
|
|
54
43
|
tableNode = props.tableNode,
|
|
@@ -58,15 +47,10 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
|
|
|
58
47
|
if (!columnWidths) {
|
|
59
48
|
return [];
|
|
60
49
|
}
|
|
61
|
-
var tableContainerWidth;
|
|
62
50
|
var tableResized = isTableResized(columnWidths);
|
|
63
51
|
var noOfColumns = columnWidths.length;
|
|
64
52
|
var targetWidths;
|
|
65
|
-
|
|
66
|
-
tableContainerWidth = getTableContainerWidth(tableNode);
|
|
67
|
-
} else {
|
|
68
|
-
tableContainerWidth = getTableLayoutWidth(layout);
|
|
69
|
-
}
|
|
53
|
+
var tableContainerWidth = getTableContainerWidth(tableNode);
|
|
70
54
|
if (isTableResizingEnabled(rendererAppearance) && !isInsideOfBlockNode && !isinsideMultiBodiedExtension && !tableResized) {
|
|
71
55
|
// for tables with no column widths defined, assume that the real table width
|
|
72
56
|
// is defined by node.attrs.width
|
|
@@ -12,12 +12,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
12
12
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
13
13
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
14
14
|
import React from 'react';
|
|
15
|
-
import {
|
|
15
|
+
import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
|
|
16
16
|
import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
|
|
17
17
|
import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
|
|
18
18
|
import { SortOrder } from '@atlaskit/editor-common/types';
|
|
19
19
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
|
|
20
|
-
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
21
20
|
import { getTableContainerWidth } from '@atlaskit/editor-common/node-width';
|
|
22
21
|
import { FullPagePadding } from '../../ui/Renderer/style';
|
|
23
22
|
import { TableHeader } from './tableCell';
|
|
@@ -26,7 +25,7 @@ import { StickyTable, tableStickyPadding, OverflowParent } from './table/sticky'
|
|
|
26
25
|
import { Table } from './table/table';
|
|
27
26
|
import { isFullWidthOrFullPageAppearance } from '../utils/appearance';
|
|
28
27
|
export var isTableResizingEnabled = function isTableResizingEnabled(appearance) {
|
|
29
|
-
return
|
|
28
|
+
return isFullWidthOrFullPageAppearance(appearance);
|
|
30
29
|
};
|
|
31
30
|
var orderChildren = function orderChildren(children, tableNode, smartCardStorage, tableOrderStatus) {
|
|
32
31
|
if (!tableOrderStatus || tableOrderStatus.order === SortOrder.NO_ORDER) {
|
|
@@ -292,7 +291,6 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
292
291
|
isinsideMultiBodiedExtension = _this$props.isinsideMultiBodiedExtension;
|
|
293
292
|
var stickyMode = this.state.stickyMode;
|
|
294
293
|
var lineLength = akEditorDefaultLayoutWidth;
|
|
295
|
-
var tableWidth;
|
|
296
294
|
var left;
|
|
297
295
|
var updatedLayout;
|
|
298
296
|
|
|
@@ -300,8 +298,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
300
298
|
// Please consider changes below carefully to not negatively impact SSR
|
|
301
299
|
// `renderWidth` cannot be depended on during SSR
|
|
302
300
|
var isRenderWidthValid = !!renderWidth && renderWidth > 0;
|
|
303
|
-
var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(
|
|
304
|
-
if (rendererAppearance === 'full-width' && !tableNode.attrs.width) {
|
|
301
|
+
var calcDefaultLayoutWidthByAppearance = function calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode) {
|
|
302
|
+
if (rendererAppearance === 'full-width' && !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width)) {
|
|
305
303
|
return isRenderWidthValid ? Math.min(akEditorFullWidthLayoutWidth, renderWidth) : akEditorFullWidthLayoutWidth;
|
|
306
304
|
} else {
|
|
307
305
|
// custom width, or width mapped to breakpoint
|
|
@@ -309,12 +307,8 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
309
307
|
return isRenderWidthValid ? Math.min(tableContainerWidth, renderWidth) : tableContainerWidth;
|
|
310
308
|
}
|
|
311
309
|
};
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
} else {
|
|
315
|
-
tableWidth = calcTableWidth(layout, renderWidth, false);
|
|
316
|
-
}
|
|
317
|
-
if (canUseLinelength(rendererAppearance) && tableWidth !== 'inherit' && tableWidth > lineLength) {
|
|
310
|
+
var tableWidth = calcDefaultLayoutWidthByAppearance(rendererAppearance, tableNode);
|
|
311
|
+
if (canUseLinelength(rendererAppearance) && tableWidth > lineLength) {
|
|
318
312
|
left = lineLength / 2 - tableWidth / 2;
|
|
319
313
|
}
|
|
320
314
|
var children = React.Children.toArray(this.props.children);
|
|
@@ -322,30 +316,15 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
322
316
|
// Historically, tables in the full-width renderer had their layout set to 'default' which is deceiving.
|
|
323
317
|
// This check caters for those tables and helps with SSR logic
|
|
324
318
|
var isFullWidth = !(tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) && rendererAppearance === 'full-width' && layout !== 'full-width';
|
|
325
|
-
var hasCustomWidth = isTableResizingEnabled(rendererAppearance) && (tableNode === null || tableNode === void 0 ? void 0 : tableNode.attrs.width);
|
|
326
319
|
if (isFullWidth) {
|
|
327
320
|
updatedLayout = 'full-width';
|
|
328
|
-
|
|
321
|
+
// if table has width explicity set, ensure SSR is handled
|
|
322
|
+
} else if (tableNode !== null && tableNode !== void 0 && tableNode.attrs.width) {
|
|
329
323
|
updatedLayout = 'custom';
|
|
330
324
|
} else {
|
|
331
325
|
updatedLayout = layout;
|
|
332
326
|
}
|
|
333
|
-
return /*#__PURE__*/React.createElement(React.Fragment, null,
|
|
334
|
-
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
335
|
-
tableWidth: tableWidth,
|
|
336
|
-
layout: layout,
|
|
337
|
-
renderWidth: renderWidth,
|
|
338
|
-
handleRef: this.props.handleRef,
|
|
339
|
-
shadowClassNames: this.props.shadowClassNames,
|
|
340
|
-
top: this.stickyTop,
|
|
341
|
-
left: left,
|
|
342
|
-
mode: stickyMode,
|
|
343
|
-
innerRef: this.stickyWrapperRef,
|
|
344
|
-
wrapperWidth: this.state.wrapperWidth,
|
|
345
|
-
columnWidths: columnWidths,
|
|
346
|
-
rowHeight: this.state.headerRowHeight,
|
|
347
|
-
rendererAppearance: rendererAppearance
|
|
348
|
-
}, [children && children[0]]), /*#__PURE__*/React.createElement("div", {
|
|
327
|
+
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
|
|
349
328
|
className: "".concat(TableSharedCssClassName.TABLE_CONTAINER, " ").concat(this.props.shadowClassNames || ''),
|
|
350
329
|
"data-layout": updatedLayout,
|
|
351
330
|
ref: this.props.handleRef,
|
|
@@ -354,7 +333,7 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
354
333
|
// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
|
|
355
334
|
left: left
|
|
356
335
|
}
|
|
357
|
-
},
|
|
336
|
+
}, stickyHeaders && tableCanBeSticky(tableNode, children) && /*#__PURE__*/React.createElement(StickyTable, {
|
|
358
337
|
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
359
338
|
tableWidth: tableWidth,
|
|
360
339
|
layout: layout,
|
|
@@ -46,7 +46,7 @@ import { EditorMediaClientProvider } from '../../react/utils/EditorMediaClientPr
|
|
|
46
46
|
export var NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
47
47
|
export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
48
48
|
var packageName = "@atlaskit/renderer";
|
|
49
|
-
var packageVersion = "109.17.
|
|
49
|
+
var packageVersion = "109.17.2";
|
|
50
50
|
export var Renderer = /*#__PURE__*/function (_PureComponent) {
|
|
51
51
|
_inherits(Renderer, _PureComponent);
|
|
52
52
|
var _super = _createSuper(Renderer);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "109.17.
|
|
3
|
+
"version": "109.17.2",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -38,7 +38,7 @@
|
|
|
38
38
|
"@atlaskit/editor-shared-styles": "^2.9.0",
|
|
39
39
|
"@atlaskit/emoji": "^67.6.0",
|
|
40
40
|
"@atlaskit/icon": "^22.1.0",
|
|
41
|
-
"@atlaskit/link-datasource": "^1.
|
|
41
|
+
"@atlaskit/link-datasource": "^1.27.0",
|
|
42
42
|
"@atlaskit/media-card": "^77.11.0",
|
|
43
43
|
"@atlaskit/media-client": "^26.3.0",
|
|
44
44
|
"@atlaskit/media-client-react": "^2.0.0",
|
|
@@ -119,9 +119,6 @@
|
|
|
119
119
|
}
|
|
120
120
|
},
|
|
121
121
|
"platform-feature-flags": {
|
|
122
|
-
"platform.editor.custom-table-width": {
|
|
123
|
-
"type": "boolean"
|
|
124
|
-
},
|
|
125
122
|
"platform.media-experience.media-viewer-v2_hgsii": {
|
|
126
123
|
"type": "boolean",
|
|
127
124
|
"referenceOnly": "true"
|