@atlaskit/renderer 120.1.11 → 120.2.1
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 +26 -0
- package/dist/cjs/react/marks/breakout.js +4 -0
- package/dist/cjs/react/nodes/table/colgroup.js +3 -1
- package/dist/cjs/react/nodes/table.js +57 -3
- package/dist/cjs/ui/Renderer/index.js +1 -1
- package/dist/es2019/react/marks/breakout.js +4 -0
- package/dist/es2019/react/nodes/table/colgroup.js +1 -1
- package/dist/es2019/react/nodes/table.js +57 -1
- package/dist/es2019/ui/Renderer/index.js +1 -1
- package/dist/esm/react/marks/breakout.js +4 -0
- package/dist/esm/react/nodes/table/colgroup.js +3 -1
- package/dist/esm/react/nodes/table.js +57 -3
- package/dist/esm/ui/Renderer/index.js +1 -1
- package/package.json +9 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,31 @@
|
|
|
1
1
|
# @atlaskit/renderer
|
|
2
2
|
|
|
3
|
+
## 120.2.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#190087](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190087)
|
|
8
|
+
[`3a050d48dee0c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3a050d48dee0c) -
|
|
9
|
+
[ux] [CONFCLOUD-82045] Fixes regression where numbered take up too much space inside include
|
|
10
|
+
macros
|
|
11
|
+
- [#190422](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190422)
|
|
12
|
+
[`232f2b56060b1`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/232f2b56060b1) -
|
|
13
|
+
[ENGHEALTH-27833] Make table's with overflow scrolling a labelled focusable region that users can
|
|
14
|
+
tab to so keyboard users can navigate the scrollable region
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
17
|
+
## 120.2.0
|
|
18
|
+
|
|
19
|
+
### Minor Changes
|
|
20
|
+
|
|
21
|
+
- [#190110](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/190110)
|
|
22
|
+
[`0fc96695978de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0fc96695978de) -
|
|
23
|
+
Fix breakout width calculation in full width
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- Updated dependencies
|
|
28
|
+
|
|
3
29
|
## 120.1.11
|
|
4
30
|
|
|
5
31
|
### Patch Changes
|
|
@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
9
9
|
var _react = require("@emotion/react");
|
|
10
10
|
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
|
|
11
11
|
var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
|
|
12
|
+
var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
|
|
12
13
|
/**
|
|
13
14
|
* @jsxRuntime classic
|
|
14
15
|
* @jsx jsx
|
|
@@ -27,6 +28,9 @@ var getWidth = function getWidth(width, mode) {
|
|
|
27
28
|
return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
|
|
28
29
|
} else {
|
|
29
30
|
if (mode === 'full-width') {
|
|
31
|
+
if ((0, _expValEquals.expValEquals)('platform_editor_renderer_breakout_fix', 'isEnabled', true)) {
|
|
32
|
+
return "min(".concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))");
|
|
33
|
+
}
|
|
30
34
|
return "max(".concat(_editorSharedStyles.akEditorDefaultLayoutWidth, "px, min(").concat(_editorSharedStyles.akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width)))");
|
|
31
35
|
}
|
|
32
36
|
if (mode === 'wide') {
|
|
@@ -73,7 +73,9 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
|
|
|
73
73
|
isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled,
|
|
74
74
|
allowTableResizing = props.allowTableResizing,
|
|
75
75
|
isTopLevelRenderer = props.isTopLevelRenderer;
|
|
76
|
-
if (!columnWidths) {
|
|
76
|
+
if (!columnWidths || columnWidths.every(function (width) {
|
|
77
|
+
return width === 0;
|
|
78
|
+
}) && (0, _platformFeatureFlags.fg)('platform_editor_numbered_column_in_include')) {
|
|
77
79
|
return [];
|
|
78
80
|
}
|
|
79
81
|
var tableColumnResized = isTableColumnResized(columnWidths);
|
|
@@ -14,7 +14,9 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
|
|
|
14
14
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
15
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
16
16
|
var _react = _interopRequireDefault(require("react"));
|
|
17
|
+
var _reactIntlNext = require("react-intl-next");
|
|
17
18
|
var _styles = require("@atlaskit/editor-common/styles");
|
|
19
|
+
var _messages = require("@atlaskit/editor-common/messages");
|
|
18
20
|
var _ui = require("@atlaskit/editor-common/ui");
|
|
19
21
|
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
20
22
|
var _utils = require("@atlaskit/editor-common/utils");
|
|
@@ -123,6 +125,41 @@ var isHeaderRowEnabled = exports.isHeaderRowEnabled = function isHeaderRowEnable
|
|
|
123
125
|
return node.type === _tableCell.TableHeader;
|
|
124
126
|
});
|
|
125
127
|
};
|
|
128
|
+
/**
|
|
129
|
+
* This TableWrapper component was created to make sure that the aria-label can be
|
|
130
|
+
* internationalized without needing to add `intl` to the TableContainer.
|
|
131
|
+
*
|
|
132
|
+
* @param {TableWrapperProps} root0 - The props object.
|
|
133
|
+
* @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
|
|
134
|
+
* @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
|
|
135
|
+
* @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
|
|
136
|
+
* @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
|
|
137
|
+
* @returns The rendered table wrapper component.
|
|
138
|
+
* @example
|
|
139
|
+
* <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
|
|
140
|
+
* <Table>...</Table>
|
|
141
|
+
* </TableWrapper>
|
|
142
|
+
*/
|
|
143
|
+
var TableWrapper = function TableWrapper(_ref2) {
|
|
144
|
+
var children = _ref2.children,
|
|
145
|
+
wrapperRef = _ref2.wrapperRef,
|
|
146
|
+
onScroll = _ref2.onScroll,
|
|
147
|
+
stickyHeaders = _ref2.stickyHeaders;
|
|
148
|
+
var _useIntl = (0, _reactIntlNext.useIntl)(),
|
|
149
|
+
formatMessage = _useIntl.formatMessage;
|
|
150
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
151
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
152
|
+
className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
|
|
153
|
+
ref: wrapperRef,
|
|
154
|
+
onScroll: stickyHeaders ? onScroll : undefined
|
|
155
|
+
// Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
|
|
156
|
+
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
157
|
+
,
|
|
158
|
+
tabIndex: 0,
|
|
159
|
+
role: "region",
|
|
160
|
+
"aria-label": formatMessage(_messages.tableMessages.tableScrollRegion)
|
|
161
|
+
}, children);
|
|
162
|
+
};
|
|
126
163
|
var tableCanBeSticky = exports.tableCanBeSticky = function tableCanBeSticky(node, children) {
|
|
127
164
|
return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
|
|
128
165
|
};
|
|
@@ -515,7 +552,24 @@ var TableContainer = exports.TableContainer = /*#__PURE__*/function (_React$Comp
|
|
|
515
552
|
tableNode: tableNode,
|
|
516
553
|
rendererAppearance: rendererAppearance,
|
|
517
554
|
allowTableResizing: allowTableResizing
|
|
518
|
-
}, [children && children[0]]), /*#__PURE__*/_react.default.createElement(
|
|
555
|
+
}, [children && children[0]]), (0, _platformFeatureFlags.fg)('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/_react.default.createElement(TableWrapper, {
|
|
556
|
+
wrapperRef: this.wrapperRef,
|
|
557
|
+
onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
|
|
558
|
+
stickyHeaders: stickyHeaders
|
|
559
|
+
}, /*#__PURE__*/_react.default.createElement(_table.Table, {
|
|
560
|
+
innerRef: this.tableRef,
|
|
561
|
+
columnWidths: columnWidths,
|
|
562
|
+
layout: layout,
|
|
563
|
+
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
564
|
+
renderWidth: renderWidth,
|
|
565
|
+
tableNode: tableNode,
|
|
566
|
+
rendererAppearance: rendererAppearance,
|
|
567
|
+
isInsideOfBlockNode: isInsideOfBlockNode,
|
|
568
|
+
isInsideOfTable: isInsideOfTable,
|
|
569
|
+
isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
|
|
570
|
+
allowTableResizing: allowTableResizing,
|
|
571
|
+
isPresentational: isPresentational
|
|
572
|
+
}, this.grabFirstRowRef(children))) : /*#__PURE__*/_react.default.createElement("div", {
|
|
519
573
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
520
574
|
className: _styles.TableSharedCssClassName.TABLE_NODE_WRAPPER,
|
|
521
575
|
ref: this.wrapperRef,
|
|
@@ -673,9 +727,9 @@ var TableWithWidth = function TableWithWidth(props) {
|
|
|
673
727
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
674
728
|
, props);
|
|
675
729
|
} else {
|
|
676
|
-
return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (
|
|
730
|
+
return /*#__PURE__*/_react.default.createElement(_ui.WidthConsumer, null, function (_ref3) {
|
|
677
731
|
var _props$columnWidths2;
|
|
678
|
-
var width =
|
|
732
|
+
var width = _ref3.width;
|
|
679
733
|
var renderWidth = props.rendererAppearance === 'full-page' ? width - _style.FullPagePadding * 2 : width;
|
|
680
734
|
var colWidthsSum = ((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce(function (total, val) {
|
|
681
735
|
return total + val;
|
|
@@ -62,7 +62,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
|
|
|
62
62
|
var NORMAL_SEVERITY_THRESHOLD = exports.NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
63
63
|
var DEGRADED_SEVERITY_THRESHOLD = exports.DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
64
64
|
var packageName = "@atlaskit/renderer";
|
|
65
|
-
var packageVersion = "120.
|
|
65
|
+
var packageVersion = "120.2.0";
|
|
66
66
|
var setAsQueryContainerStyles = (0, _react2.css)({
|
|
67
67
|
containerName: 'ak-renderer-wrapper',
|
|
68
68
|
containerType: 'inline-size'
|
|
@@ -7,6 +7,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
7
7
|
import { css, jsx } from '@emotion/react';
|
|
8
8
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
|
|
9
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
10
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
10
11
|
const wrapperStyles = css({
|
|
11
12
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
12
13
|
margin: `${blockNodesVerticalMargin} 0`,
|
|
@@ -19,6 +20,9 @@ const getWidth = (width, mode) => {
|
|
|
19
20
|
return `min(${width}px, var(--ak-editor--breakout-container-without-gutter-width))`;
|
|
20
21
|
} else {
|
|
21
22
|
if (mode === 'full-width') {
|
|
23
|
+
if (expValEquals('platform_editor_renderer_breakout_fix', 'isEnabled', true)) {
|
|
24
|
+
return `min(${akEditorFullWidthLayoutWidth}px, var(--ak-editor--breakout-container-without-gutter-width))`;
|
|
25
|
+
}
|
|
22
26
|
return `max(${akEditorDefaultLayoutWidth}px, min(${akEditorFullWidthLayoutWidth}px, var(--ak-editor--breakout-container-without-gutter-width)))`;
|
|
23
27
|
}
|
|
24
28
|
if (mode === 'wide') {
|
|
@@ -61,7 +61,7 @@ const renderScaleDownColgroup = props => {
|
|
|
61
61
|
allowTableResizing,
|
|
62
62
|
isTopLevelRenderer
|
|
63
63
|
} = props;
|
|
64
|
-
if (!columnWidths) {
|
|
64
|
+
if (!columnWidths || columnWidths.every(width => width === 0) && fg('platform_editor_numbered_column_in_include')) {
|
|
65
65
|
return [];
|
|
66
66
|
}
|
|
67
67
|
const tableColumnResized = isTableColumnResized(columnWidths);
|
|
@@ -1,7 +1,9 @@
|
|
|
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 { useIntl } from 'react-intl-next';
|
|
4
5
|
import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
|
|
6
|
+
import { tableMessages } from '@atlaskit/editor-common/messages';
|
|
5
7
|
import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
|
|
6
8
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
7
9
|
import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
|
|
@@ -92,6 +94,43 @@ export const isHeaderRowEnabled = rows => {
|
|
|
92
94
|
}
|
|
93
95
|
return children.every(node => node.type === TableHeader);
|
|
94
96
|
};
|
|
97
|
+
/**
|
|
98
|
+
* This TableWrapper component was created to make sure that the aria-label can be
|
|
99
|
+
* internationalized without needing to add `intl` to the TableContainer.
|
|
100
|
+
*
|
|
101
|
+
* @param {TableWrapperProps} root0 - The props object.
|
|
102
|
+
* @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
|
|
103
|
+
* @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
|
|
104
|
+
* @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
|
|
105
|
+
* @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
|
|
106
|
+
* @returns The rendered table wrapper component.
|
|
107
|
+
* @example
|
|
108
|
+
* <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
|
|
109
|
+
* <Table>...</Table>
|
|
110
|
+
* </TableWrapper>
|
|
111
|
+
*/
|
|
112
|
+
const TableWrapper = ({
|
|
113
|
+
children,
|
|
114
|
+
wrapperRef,
|
|
115
|
+
onScroll,
|
|
116
|
+
stickyHeaders
|
|
117
|
+
}) => {
|
|
118
|
+
const {
|
|
119
|
+
formatMessage
|
|
120
|
+
} = useIntl();
|
|
121
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
122
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
123
|
+
className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
|
|
124
|
+
ref: wrapperRef,
|
|
125
|
+
onScroll: stickyHeaders ? onScroll : undefined
|
|
126
|
+
// Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
|
|
127
|
+
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
128
|
+
,
|
|
129
|
+
tabIndex: 0,
|
|
130
|
+
role: "region",
|
|
131
|
+
"aria-label": formatMessage(tableMessages.tableScrollRegion)
|
|
132
|
+
}, children);
|
|
133
|
+
};
|
|
95
134
|
export const tableCanBeSticky = (node, children) => {
|
|
96
135
|
return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
|
|
97
136
|
};
|
|
@@ -456,7 +495,24 @@ export class TableContainer extends React.Component {
|
|
|
456
495
|
tableNode: tableNode,
|
|
457
496
|
rendererAppearance: rendererAppearance,
|
|
458
497
|
allowTableResizing: allowTableResizing
|
|
459
|
-
}, [children && children[0]]), /*#__PURE__*/React.createElement(
|
|
498
|
+
}, [children && children[0]]), fg('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/React.createElement(TableWrapper, {
|
|
499
|
+
wrapperRef: this.wrapperRef,
|
|
500
|
+
onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
|
|
501
|
+
stickyHeaders: stickyHeaders
|
|
502
|
+
}, /*#__PURE__*/React.createElement(Table, {
|
|
503
|
+
innerRef: this.tableRef,
|
|
504
|
+
columnWidths: columnWidths,
|
|
505
|
+
layout: layout,
|
|
506
|
+
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
507
|
+
renderWidth: renderWidth,
|
|
508
|
+
tableNode: tableNode,
|
|
509
|
+
rendererAppearance: rendererAppearance,
|
|
510
|
+
isInsideOfBlockNode: isInsideOfBlockNode,
|
|
511
|
+
isInsideOfTable: isInsideOfTable,
|
|
512
|
+
isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
|
|
513
|
+
allowTableResizing: allowTableResizing,
|
|
514
|
+
isPresentational: isPresentational
|
|
515
|
+
}, this.grabFirstRowRef(children))) : /*#__PURE__*/React.createElement("div", {
|
|
460
516
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
461
517
|
className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
|
|
462
518
|
ref: this.wrapperRef,
|
|
@@ -48,7 +48,7 @@ import { PortalContext } from './PortalContext';
|
|
|
48
48
|
export const NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
49
49
|
export const DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
50
50
|
const packageName = "@atlaskit/renderer";
|
|
51
|
-
const packageVersion = "120.
|
|
51
|
+
const packageVersion = "120.2.0";
|
|
52
52
|
const setAsQueryContainerStyles = css({
|
|
53
53
|
containerName: 'ak-renderer-wrapper',
|
|
54
54
|
containerType: 'inline-size'
|
|
@@ -7,6 +7,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
7
7
|
import { css, jsx } from '@emotion/react';
|
|
8
8
|
import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth, blockNodesVerticalMargin } from '@atlaskit/editor-shared-styles';
|
|
9
9
|
import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
|
|
10
|
+
import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
|
|
10
11
|
var wrapperStyles = css({
|
|
11
12
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
12
13
|
margin: "".concat(blockNodesVerticalMargin, " 0"),
|
|
@@ -19,6 +20,9 @@ var getWidth = function getWidth(width, mode) {
|
|
|
19
20
|
return "min(".concat(width, "px, var(--ak-editor--breakout-container-without-gutter-width))");
|
|
20
21
|
} else {
|
|
21
22
|
if (mode === 'full-width') {
|
|
23
|
+
if (expValEquals('platform_editor_renderer_breakout_fix', 'isEnabled', true)) {
|
|
24
|
+
return "min(".concat(akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width))");
|
|
25
|
+
}
|
|
22
26
|
return "max(".concat(akEditorDefaultLayoutWidth, "px, min(").concat(akEditorFullWidthLayoutWidth, "px, var(--ak-editor--breakout-container-without-gutter-width)))");
|
|
23
27
|
}
|
|
24
28
|
if (mode === 'wide') {
|
|
@@ -67,7 +67,9 @@ var renderScaleDownColgroup = function renderScaleDownColgroup(props) {
|
|
|
67
67
|
isTableFixedColumnWidthsOptionEnabled = props.isTableFixedColumnWidthsOptionEnabled,
|
|
68
68
|
allowTableResizing = props.allowTableResizing,
|
|
69
69
|
isTopLevelRenderer = props.isTopLevelRenderer;
|
|
70
|
-
if (!columnWidths) {
|
|
70
|
+
if (!columnWidths || columnWidths.every(function (width) {
|
|
71
|
+
return width === 0;
|
|
72
|
+
}) && fg('platform_editor_numbered_column_in_include')) {
|
|
71
73
|
return [];
|
|
72
74
|
}
|
|
73
75
|
var tableColumnResized = isTableColumnResized(columnWidths);
|
|
@@ -12,7 +12,9 @@ function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length)
|
|
|
12
12
|
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
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 { useIntl } from 'react-intl-next';
|
|
15
16
|
import { TableSharedCssClassName, tableMarginTop } from '@atlaskit/editor-common/styles';
|
|
17
|
+
import { tableMessages } from '@atlaskit/editor-common/messages';
|
|
16
18
|
import { WidthConsumer, overflowShadow } from '@atlaskit/editor-common/ui';
|
|
17
19
|
import { fg } from '@atlaskit/platform-feature-flags';
|
|
18
20
|
import { createCompareNodes, convertProsemirrorTableNodeToArrayOfRows, hasMergedCell, compose } from '@atlaskit/editor-common/utils';
|
|
@@ -116,6 +118,41 @@ export var isHeaderRowEnabled = function isHeaderRowEnabled(rows) {
|
|
|
116
118
|
return node.type === TableHeader;
|
|
117
119
|
});
|
|
118
120
|
};
|
|
121
|
+
/**
|
|
122
|
+
* This TableWrapper component was created to make sure that the aria-label can be
|
|
123
|
+
* internationalized without needing to add `intl` to the TableContainer.
|
|
124
|
+
*
|
|
125
|
+
* @param {TableWrapperProps} root0 - The props object.
|
|
126
|
+
* @param {React.ReactNode} root0.children - The table content to render inside the wrapper.
|
|
127
|
+
* @param {React.RefObject<HTMLDivElement>} root0.wrapperRef - Ref to the wrapper div element.
|
|
128
|
+
* @param {(() => void) | undefined} root0.onScroll - Optional scroll event handler.
|
|
129
|
+
* @param {StickyHeaderConfig | undefined} root0.stickyHeaders - Optional sticky header configuration.
|
|
130
|
+
* @returns The rendered table wrapper component.
|
|
131
|
+
* @example
|
|
132
|
+
* <TableWrapper wrapperRef={ref} onScroll={handleScroll} stickyHeaders={config}>
|
|
133
|
+
* <Table>...</Table>
|
|
134
|
+
* </TableWrapper>
|
|
135
|
+
*/
|
|
136
|
+
var TableWrapper = function TableWrapper(_ref2) {
|
|
137
|
+
var children = _ref2.children,
|
|
138
|
+
wrapperRef = _ref2.wrapperRef,
|
|
139
|
+
onScroll = _ref2.onScroll,
|
|
140
|
+
stickyHeaders = _ref2.stickyHeaders;
|
|
141
|
+
var _useIntl = useIntl(),
|
|
142
|
+
formatMessage = _useIntl.formatMessage;
|
|
143
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
144
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
145
|
+
className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
|
|
146
|
+
ref: wrapperRef,
|
|
147
|
+
onScroll: stickyHeaders ? onScroll : undefined
|
|
148
|
+
// Adding tabIndex here because this is a scrollable container and it needs to be focusable so keyboard users can scroll it.
|
|
149
|
+
// eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
|
|
150
|
+
,
|
|
151
|
+
tabIndex: 0,
|
|
152
|
+
role: "region",
|
|
153
|
+
"aria-label": formatMessage(tableMessages.tableScrollRegion)
|
|
154
|
+
}, children);
|
|
155
|
+
};
|
|
119
156
|
export var tableCanBeSticky = function tableCanBeSticky(node, children) {
|
|
120
157
|
return isHeaderRowEnabled(children) && node && node.firstChild && !hasRowspan(node.firstChild);
|
|
121
158
|
};
|
|
@@ -508,7 +545,24 @@ export var TableContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
508
545
|
tableNode: tableNode,
|
|
509
546
|
rendererAppearance: rendererAppearance,
|
|
510
547
|
allowTableResizing: allowTableResizing
|
|
511
|
-
}, [children && children[0]]), /*#__PURE__*/React.createElement(
|
|
548
|
+
}, [children && children[0]]), fg('editor_enghealth_focusable_scrollable_tables') ? /*#__PURE__*/React.createElement(TableWrapper, {
|
|
549
|
+
wrapperRef: this.wrapperRef,
|
|
550
|
+
onScroll: this.props.stickyHeaders ? this.onWrapperScrolled : undefined,
|
|
551
|
+
stickyHeaders: stickyHeaders
|
|
552
|
+
}, /*#__PURE__*/React.createElement(Table, {
|
|
553
|
+
innerRef: this.tableRef,
|
|
554
|
+
columnWidths: columnWidths,
|
|
555
|
+
layout: layout,
|
|
556
|
+
isNumberColumnEnabled: isNumberColumnEnabled,
|
|
557
|
+
renderWidth: renderWidth,
|
|
558
|
+
tableNode: tableNode,
|
|
559
|
+
rendererAppearance: rendererAppearance,
|
|
560
|
+
isInsideOfBlockNode: isInsideOfBlockNode,
|
|
561
|
+
isInsideOfTable: isInsideOfTable,
|
|
562
|
+
isinsideMultiBodiedExtension: isinsideMultiBodiedExtension,
|
|
563
|
+
allowTableResizing: allowTableResizing,
|
|
564
|
+
isPresentational: isPresentational
|
|
565
|
+
}, this.grabFirstRowRef(children))) : /*#__PURE__*/React.createElement("div", {
|
|
512
566
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
513
567
|
className: TableSharedCssClassName.TABLE_NODE_WRAPPER,
|
|
514
568
|
ref: this.wrapperRef,
|
|
@@ -668,9 +722,9 @@ var TableWithWidth = function TableWithWidth(props) {
|
|
|
668
722
|
// eslint-disable-next-line react/jsx-props-no-spreading
|
|
669
723
|
, props);
|
|
670
724
|
} else {
|
|
671
|
-
return /*#__PURE__*/React.createElement(WidthConsumer, null, function (
|
|
725
|
+
return /*#__PURE__*/React.createElement(WidthConsumer, null, function (_ref3) {
|
|
672
726
|
var _props$columnWidths2;
|
|
673
|
-
var width =
|
|
727
|
+
var width = _ref3.width;
|
|
674
728
|
var renderWidth = props.rendererAppearance === 'full-page' ? width - FullPagePadding * 2 : width;
|
|
675
729
|
var colWidthsSum = ((_props$columnWidths2 = props.columnWidths) === null || _props$columnWidths2 === void 0 ? void 0 : _props$columnWidths2.reduce(function (total, val) {
|
|
676
730
|
return total + val;
|
|
@@ -53,7 +53,7 @@ import { PortalContext } from './PortalContext';
|
|
|
53
53
|
export var NORMAL_SEVERITY_THRESHOLD = 2000;
|
|
54
54
|
export var DEGRADED_SEVERITY_THRESHOLD = 3000;
|
|
55
55
|
var packageName = "@atlaskit/renderer";
|
|
56
|
-
var packageVersion = "120.
|
|
56
|
+
var packageVersion = "120.2.0";
|
|
57
57
|
var setAsQueryContainerStyles = css({
|
|
58
58
|
containerName: 'ak-renderer-wrapper',
|
|
59
59
|
containerType: 'inline-size'
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/renderer",
|
|
3
|
-
"version": "120.1
|
|
3
|
+
"version": "120.2.1",
|
|
4
4
|
"description": "Renderer component",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@atlaskit/status": "^3.0.0",
|
|
55
55
|
"@atlaskit/task-decision": "^19.2.0",
|
|
56
56
|
"@atlaskit/theme": "^19.0.0",
|
|
57
|
-
"@atlaskit/tmp-editor-statsig": "^9.
|
|
57
|
+
"@atlaskit/tmp-editor-statsig": "^9.10.0",
|
|
58
58
|
"@atlaskit/tokens": "^5.6.0",
|
|
59
59
|
"@atlaskit/tooltip": "^20.3.0",
|
|
60
60
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"uuid": "^3.1.0"
|
|
69
69
|
},
|
|
70
70
|
"peerDependencies": {
|
|
71
|
-
"@atlaskit/editor-common": "^107.
|
|
71
|
+
"@atlaskit/editor-common": "^107.10.0",
|
|
72
72
|
"@atlaskit/link-provider": "^3.4.0",
|
|
73
73
|
"@atlaskit/media-core": "^37.0.0",
|
|
74
74
|
"react": "^18.2.0",
|
|
@@ -190,6 +190,9 @@
|
|
|
190
190
|
"platform_editor_nested_dnd_styles_changes": {
|
|
191
191
|
"type": "boolean"
|
|
192
192
|
},
|
|
193
|
+
"editor_enghealth_focusable_scrollable_tables": {
|
|
194
|
+
"type": "boolean"
|
|
195
|
+
},
|
|
193
196
|
"platform_editor_comments_api_manager": {
|
|
194
197
|
"type": "boolean"
|
|
195
198
|
},
|
|
@@ -270,6 +273,9 @@
|
|
|
270
273
|
},
|
|
271
274
|
"platform_editor_avatar_group_margin_fix": {
|
|
272
275
|
"type": "boolean"
|
|
276
|
+
},
|
|
277
|
+
"platform_editor_numbered_column_in_include": {
|
|
278
|
+
"type": "boolean"
|
|
273
279
|
}
|
|
274
280
|
},
|
|
275
281
|
"af:exports": {
|