@atlaskit/link-datasource 3.22.6 → 3.22.7
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 +9 -0
- package/dist/cjs/ui/assets-modal/modal/render-assets-content/initial-state-view/index.compiled.css +7 -7
- package/dist/cjs/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js +1 -1
- package/dist/cjs/ui/common/error-state/access-required.compiled.css +1 -1
- package/dist/cjs/ui/common/error-state/access-required.js +1 -1
- package/dist/cjs/ui/common/error-state/loading-error.compiled.css +1 -1
- package/dist/cjs/ui/common/error-state/loading-error.js +1 -1
- package/dist/cjs/ui/common/initial-state-view/index.compiled.css +7 -7
- package/dist/cjs/ui/common/initial-state-view/index.js +1 -1
- package/dist/cjs/ui/issue-like-table/column-picker/concatenated-menu-list.compiled.css +4 -4
- package/dist/cjs/ui/issue-like-table/column-picker/concatenated-menu-list.js +1 -1
- package/dist/cjs/ui/issue-like-table/drag-column-preview.compiled.css +4 -4
- package/dist/cjs/ui/issue-like-table/drag-column-preview.js +1 -1
- package/dist/cjs/ui/issue-like-table/index.compiled.css +4 -4
- package/dist/cjs/ui/issue-like-table/index.js +31 -19
- package/dist/es2019/ui/assets-modal/modal/render-assets-content/initial-state-view/index.compiled.css +1 -1
- package/dist/es2019/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js +1 -1
- package/dist/es2019/ui/common/error-state/access-required.compiled.css +1 -1
- package/dist/es2019/ui/common/error-state/access-required.js +1 -1
- package/dist/es2019/ui/common/error-state/loading-error.compiled.css +1 -1
- package/dist/es2019/ui/common/error-state/loading-error.js +1 -1
- package/dist/es2019/ui/common/initial-state-view/index.compiled.css +1 -1
- package/dist/es2019/ui/common/initial-state-view/index.js +1 -1
- package/dist/es2019/ui/issue-like-table/column-picker/concatenated-menu-list.compiled.css +1 -1
- package/dist/es2019/ui/issue-like-table/column-picker/concatenated-menu-list.js +1 -1
- package/dist/es2019/ui/issue-like-table/drag-column-preview.compiled.css +1 -1
- package/dist/es2019/ui/issue-like-table/drag-column-preview.js +1 -1
- package/dist/es2019/ui/issue-like-table/index.compiled.css +1 -1
- package/dist/es2019/ui/issue-like-table/index.js +30 -18
- package/dist/esm/ui/assets-modal/modal/render-assets-content/initial-state-view/index.compiled.css +7 -7
- package/dist/esm/ui/assets-modal/modal/render-assets-content/initial-state-view/index.js +1 -1
- package/dist/esm/ui/common/error-state/access-required.compiled.css +1 -1
- package/dist/esm/ui/common/error-state/access-required.js +1 -1
- package/dist/esm/ui/common/error-state/loading-error.compiled.css +1 -1
- package/dist/esm/ui/common/error-state/loading-error.js +1 -1
- package/dist/esm/ui/common/initial-state-view/index.compiled.css +7 -7
- package/dist/esm/ui/common/initial-state-view/index.js +1 -1
- package/dist/esm/ui/issue-like-table/column-picker/concatenated-menu-list.compiled.css +4 -4
- package/dist/esm/ui/issue-like-table/column-picker/concatenated-menu-list.js +1 -1
- package/dist/esm/ui/issue-like-table/drag-column-preview.compiled.css +4 -4
- package/dist/esm/ui/issue-like-table/drag-column-preview.js +1 -1
- package/dist/esm/ui/issue-like-table/index.compiled.css +4 -4
- package/dist/esm/ui/issue-like-table/index.js +31 -19
- package/package.json +5 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/link-datasource
|
|
2
2
|
|
|
3
|
+
## 3.22.7
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#124694](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/124694)
|
|
8
|
+
[`979dfafd8d91d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/979dfafd8d91d) -
|
|
9
|
+
[ux] Behind FF: `enable_fix_datasource_jumping_columns` introduce logic to fix issue of last
|
|
10
|
+
column in datasource table jumping on screen resize
|
|
11
|
+
|
|
3
12
|
## 3.22.6
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
package/dist/cjs/ui/assets-modal/modal/render-assets-content/initial-state-view/index.compiled.css
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
._1bah1h6o{justify-content:center}
|
|
2
2
|
._1e0c1txw{display:flex}
|
|
3
3
|
._1wpz1h6o{align-self:center}
|
|
4
|
-
.
|
|
4
|
+
._1y0bdipb font{xsmall:normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
5
5
|
._4t3i1osq{height:100%}
|
|
6
6
|
._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
|
|
7
7
|
._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
|
|
8
|
-
.
|
|
9
|
-
.
|
|
10
|
-
.
|
|
11
|
-
.
|
|
8
|
+
._pfzw85h9 font{xlarge:normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
9
|
+
._v2gl1yp8 font{small:normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
10
|
+
._wtt4ykg7 font{xxlarge:normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
11
|
+
._x3fx1hgc font{medium:normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
12
12
|
._y3gn1h6o{text-align:center}
|
|
13
|
-
.
|
|
14
|
-
.
|
|
13
|
+
._z7oy1jq3 font{xxsmall:normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
14
|
+
._zzcc1umn font{large:normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
@@ -34,7 +34,7 @@ var InitialStateViewNew = exports.InitialStateViewNew = function InitialStateVie
|
|
|
34
34
|
size: "xlarge",
|
|
35
35
|
alt: formatMessage(_messages.initialStateViewMessages.searchTitle)
|
|
36
36
|
}) : /*#__PURE__*/React.createElement(_crystalBallSvgOld.CrystalBallSVGOld, null), /*#__PURE__*/React.createElement("div", {
|
|
37
|
-
className: (0, _runtime.ax)(["_ca0qpxbi _n3tdu2gc
|
|
37
|
+
className: (0, _runtime.ax)(["_ca0qpxbi _n3tdu2gc _wtt4ykg7 _pfzw85h9 _zzcc1umn _x3fx1hgc _v2gl1yp8 _1y0bdipb _z7oy1jq3"])
|
|
38
38
|
}, formatMessage(_messages.initialStateViewMessages.searchTitle)), /*#__PURE__*/React.createElement("div", null, formatMessage(_messages.initialStateViewMessages.searchDescription)), /*#__PURE__*/React.createElement("a", {
|
|
39
39
|
href: AQLSupportDocumentLink,
|
|
40
40
|
target: "_blank"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._zulppxbi{gap:var(--ds-space-200,1pc)}
|
|
3
3
|
._1e0c1txw{display:flex}
|
|
4
4
|
._2lx21bp4{flex-direction:column}
|
|
@@ -27,7 +27,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
27
27
|
var styles = {
|
|
28
28
|
iconContainerStyles: "_otyrpxbi",
|
|
29
29
|
descriptionMessageStyles: "_zulppxbi _1e0c1txw _2lx21bp4",
|
|
30
|
-
urlStyles: "
|
|
30
|
+
urlStyles: "_11c82smr _syaznoz8"
|
|
31
31
|
};
|
|
32
32
|
var Description = function Description(_ref) {
|
|
33
33
|
var message = _ref.message,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
.
|
|
2
|
+
._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
3
|
._zulppxbi{gap:var(--ds-space-200,1pc)}
|
|
4
4
|
._zulpu2gc{gap:var(--ds-space-100,8px)}._10fp1h6o{justify-self:center}
|
|
5
5
|
._1e0c11p5{display:grid}
|
|
@@ -26,7 +26,7 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
|
|
|
26
26
|
var styles = {
|
|
27
27
|
errorContainerStyles: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _1e0c11p5",
|
|
28
28
|
errorMessageContainerStyles: "_zulpu2gc _4cvr1h6o _6a6z1h6o _1e0c11p5",
|
|
29
|
-
errorMessageStyles: "
|
|
29
|
+
errorMessageStyles: "_11c8nbxd"
|
|
30
30
|
};
|
|
31
31
|
var LoadingErrorNew = exports.LoadingErrorNew = function LoadingErrorNew(_ref) {
|
|
32
32
|
var onRefresh = _ref.onRefresh;
|
|
@@ -3,18 +3,18 @@
|
|
|
3
3
|
._1e0c1o8l{display:inline-block}
|
|
4
4
|
._1e0c1txw{display:flex}
|
|
5
5
|
._1wpz1h6o{align-self:center}
|
|
6
|
-
.
|
|
6
|
+
._1y0bdipb font{xsmall:normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
7
7
|
._4cvr1h6o{align-items:center}
|
|
8
8
|
._4t3i1osq{height:100%}
|
|
9
9
|
._ca0qoahv{padding-top:var(--ds-space-600,3pc)}
|
|
10
10
|
._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
|
|
11
11
|
._n3tdoahv{padding-bottom:var(--ds-space-600,3pc)}
|
|
12
12
|
._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
|
|
13
|
-
.
|
|
13
|
+
._pfzw85h9 font{xlarge:normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
14
14
|
._syazg0pi{color:var(--_1dzgjqk)}
|
|
15
|
-
.
|
|
16
|
-
.
|
|
17
|
-
.
|
|
15
|
+
._v2gl1yp8 font{small:normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
16
|
+
._wtt4ykg7 font{xxlarge:normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
17
|
+
._x3fx1hgc font{medium:normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
18
18
|
._y3gn1h6o{text-align:center}
|
|
19
|
-
.
|
|
20
|
-
.
|
|
19
|
+
._z7oy1jq3 font{xxsmall:normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
20
|
+
._zzcc1umn font{large:normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
@@ -40,7 +40,7 @@ var InitialStateViewNew = exports.InitialStateViewNew = function InitialStateVie
|
|
|
40
40
|
}, /*#__PURE__*/React.createElement("div", {
|
|
41
41
|
className: (0, _runtime.ax)(["_y3gn1h6o _1wpz1h6o _ca0qoahv _n3tdoahv"])
|
|
42
42
|
}, icon, /*#__PURE__*/React.createElement("div", {
|
|
43
|
-
className: (0, _runtime.ax)(["_zulpu2gc _syazg0pi _ca0qpxbi _n3tdu2gc _1e0c1txw _1bah1h6o _4cvr1h6o
|
|
43
|
+
className: (0, _runtime.ax)(["_zulpu2gc _syazg0pi _ca0qpxbi _n3tdu2gc _1e0c1txw _1bah1h6o _4cvr1h6o _wtt4ykg7 _pfzw85h9 _zzcc1umn _x3fx1hgc _v2gl1yp8 _1y0bdipb _z7oy1jq3"]),
|
|
44
44
|
style: {
|
|
45
45
|
"--_1dzgjqk": (0, _runtime.ix)("var(--ds-text-subtlest, ".concat(_colors.N300, ")"))
|
|
46
46
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
|
|
2
2
|
._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
3
|
+
._u6rdk9i7 font{-u-n-s-a-f-e_small:normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
4
|
+
._v2glf7ua font{small:normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
5
|
+
._x3fxnil1 font{medium:normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
6
|
+
._zzcc4f4w font{large:normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
@@ -36,7 +36,7 @@ var ConcatenatedMenuListNew = function ConcatenatedMenuListNew(_ref) {
|
|
|
36
36
|
};
|
|
37
37
|
var maximumLimitReachedMessage = /*#__PURE__*/React.createElement("div", {
|
|
38
38
|
style: optionStyle,
|
|
39
|
-
className: (0, _runtime.ax)(["_syaz1gjq _k48pi7a9
|
|
39
|
+
className: (0, _runtime.ax)(["_syaz1gjq _k48pi7a9 _zzcc4f4w _x3fxnil1 _u6rdk9i7 _v2glf7ua"])
|
|
40
40
|
}, /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({
|
|
41
41
|
tagName: 'div'
|
|
42
42
|
}, _messages.columnPickerMessages.maximumItemsShownLine1)), /*#__PURE__*/React.createElement(_reactIntlNext.FormattedMessage, (0, _extends2.default)({
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
._s7n4yfq0, .ProseMirror .pm-table-wrapper>table thead ._ntwryfq0, .pm-table-wrapper>table thead ._3eneyfq0{vertical-align:bottom}
|
|
42
42
|
._u5f31b66, .ProseMirror .pm-table-wrapper>table thead ._1pmc1b66, .pm-table-wrapper>table thead ._11ep1b66{padding-right:var(--ds-space-050,4px)}
|
|
43
43
|
._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
|
|
44
|
-
.
|
|
45
|
-
.
|
|
44
|
+
._u6rdk9i7 font{-u-n-s-a-f-e_small:normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
45
|
+
._v2glf7ua font{small:normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
46
46
|
._vchhusvi, .ProseMirror .pm-table-wrapper>table thead ._1wwnusvi, .pm-table-wrapper>table thead ._1gbausvi{box-sizing:border-box}
|
|
47
47
|
._vchhusvi{box-sizing:border-box}
|
|
48
48
|
._vwz41tcg, .ProseMirror .pm-table-wrapper>table thead ._s99e1tcg, .pm-table-wrapper>table thead ._3mvc1tcg{line-height:24px}
|
|
49
|
-
.
|
|
49
|
+
._x3fxnil1 font{medium:normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
50
50
|
._yq5hus1c{border-collapse:separate}
|
|
51
|
-
.
|
|
51
|
+
._zzcc4f4w font{large:normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
@@ -74,7 +74,7 @@ var DragColumnPreviewNew = function DragColumnPreviewNew(_ref4) {
|
|
|
74
74
|
var title = _ref4.title,
|
|
75
75
|
rows = _ref4.rows;
|
|
76
76
|
return /*#__PURE__*/_react.default.createElement("table", {
|
|
77
|
-
className: (0, _runtime.ax)(["_bfhkvuon _yq5hus1c _btyzidpf _p12fuuw1
|
|
77
|
+
className: (0, _runtime.ax)(["_bfhkvuon _yq5hus1c _btyzidpf _p12fuuw1 _zzcc4f4w _x3fxnil1 _u6rdk9i7 _v2glf7ua"])
|
|
78
78
|
}, /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", null, /*#__PURE__*/_react.default.createElement(TablePreviewHeading, null, title))), /*#__PURE__*/_react.default.createElement("tbody", null, rows.map(function (data, i) {
|
|
79
79
|
return /*#__PURE__*/_react.default.createElement("tr", {
|
|
80
80
|
key: i
|
|
@@ -75,14 +75,14 @@
|
|
|
75
75
|
._s7n4yfq0, .ProseMirror .pm-table-wrapper>table thead ._ntwryfq0, .pm-table-wrapper>table thead ._3eneyfq0{vertical-align:bottom}
|
|
76
76
|
._u5f31b66, .ProseMirror .pm-table-wrapper>table thead ._1pmc1b66, .pm-table-wrapper>table thead ._11ep1b66{padding-right:var(--ds-space-050,4px)}
|
|
77
77
|
._u5f3ze3t, .ProseMirror .pm-table-wrapper>table tbody ._1cngze3t, .pm-table-wrapper>table tbody ._1h12ze3t{padding-right:var(--ds-space-0,0)}
|
|
78
|
-
.
|
|
79
|
-
.
|
|
78
|
+
._u6rdk9i7 font{-u-n-s-a-f-e_small:normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
79
|
+
._v2glf7ua font{small:normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
80
80
|
._vchh1ntv, .ProseMirror .pm-table-wrapper>table tbody ._16601ntv, .pm-table-wrapper>table tbody ._1qd91ntv{box-sizing:content-box}
|
|
81
81
|
._vchhusvi, .ProseMirror .pm-table-wrapper>table thead ._1wwnusvi, .pm-table-wrapper>table thead ._1gbausvi{box-sizing:border-box}
|
|
82
82
|
._vchhusvi{box-sizing:border-box}
|
|
83
83
|
._vwz41tcg, .ProseMirror .pm-table-wrapper>table thead ._s99e1tcg, .pm-table-wrapper>table thead ._3mvc1tcg{line-height:24px}
|
|
84
|
-
.
|
|
84
|
+
._x3fxnil1 font{medium:normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
85
85
|
._yq5hus1c{border-collapse:separate}
|
|
86
|
-
.
|
|
86
|
+
._zzcc4f4w font{large:normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
87
87
|
._8vu416jk:hover{border-radius:var(--ds-border-radius-200,3px)}
|
|
88
88
|
._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
|
|
@@ -185,6 +185,7 @@ function getDefaultColumnWidth(key, type) {
|
|
|
185
185
|
}
|
|
186
186
|
}
|
|
187
187
|
var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
188
|
+
var _containerRef$current;
|
|
188
189
|
var testId = _ref5.testId,
|
|
189
190
|
onNextPage = _ref5.onNextPage,
|
|
190
191
|
onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
|
|
@@ -224,19 +225,22 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
224
225
|
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
|
225
226
|
orderedColumns = _useState6[0],
|
|
226
227
|
setOrderedColumns = _useState6[1];
|
|
228
|
+
var isJumpingColumnFixEnabled = (0, _platformFeatureFlags.fg)('enable_fix_datasource_jumping_columns');
|
|
227
229
|
|
|
228
230
|
// Table container width is used to know if sum of all column widths is bigger of container or not.
|
|
229
231
|
// When sum of all columns is less than container size we make last column stretchable (width: undefined)
|
|
230
232
|
var _useState7 = (0, _react.useState)(),
|
|
231
233
|
_useState8 = (0, _slicedToArray2.default)(_useState7, 2),
|
|
232
|
-
|
|
233
|
-
|
|
234
|
+
tableContainerWidthOld = _useState8[0],
|
|
235
|
+
setTableContainerWidthOld = _useState8[1];
|
|
234
236
|
(0, _react.useEffect)(function () {
|
|
235
237
|
var current = containerRef.current;
|
|
236
|
-
if (
|
|
237
|
-
|
|
238
|
+
if (!isJumpingColumnFixEnabled) {
|
|
239
|
+
if (containerRef && current) {
|
|
240
|
+
setTableContainerWidthOld(current.getBoundingClientRect().width);
|
|
241
|
+
}
|
|
238
242
|
}
|
|
239
|
-
}, [containerRef]);
|
|
243
|
+
}, [containerRef, isJumpingColumnFixEnabled]);
|
|
240
244
|
(0, _react.useEffect)(function () {
|
|
241
245
|
if (orderedColumns.length !== columns.length) {
|
|
242
246
|
setOrderedColumns(getOrderedColumns((0, _toConsumableArray2.default)(columns), (0, _toConsumableArray2.default)(visibleColumnKeys)));
|
|
@@ -271,8 +275,16 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
271
275
|
}, 0) + (onVisibleColumnKeysChange ? columnPickerWidth : 0);
|
|
272
276
|
}, [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
|
|
273
277
|
var shouldUseWidth = !!(onColumnResize || columnCustomSizes);
|
|
278
|
+
var getColumnWidthOld = (0, _react.useCallback)(function (key, type, isLastCell) {
|
|
279
|
+
if (isLastCell && shouldUseWidth && (!tableContainerWidthOld || tableContainerWidthOld > columnsWidthsSum)) {
|
|
280
|
+
return undefined;
|
|
281
|
+
} else {
|
|
282
|
+
return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
|
|
283
|
+
}
|
|
284
|
+
}, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidthOld]);
|
|
285
|
+
var tableContainerWidth = isJumpingColumnFixEnabled ? Math.ceil(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width) || 0) : 0;
|
|
274
286
|
var getColumnWidth = (0, _react.useCallback)(function (key, type, isLastCell) {
|
|
275
|
-
if (isLastCell && shouldUseWidth &&
|
|
287
|
+
if (isLastCell && shouldUseWidth && tableContainerWidth && tableContainerWidth > columnsWidthsSum) {
|
|
276
288
|
return undefined;
|
|
277
289
|
} else {
|
|
278
290
|
return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
|
|
@@ -287,10 +299,10 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
287
299
|
key: key,
|
|
288
300
|
content: title,
|
|
289
301
|
shouldTruncate: true,
|
|
290
|
-
width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
|
|
302
|
+
width: isJumpingColumnFixEnabled ? getColumnWidth(key, type, index === visibleSortedColumns.length - 1) : getColumnWidthOld(key, type, index === visibleSortedColumns.length - 1)
|
|
291
303
|
};
|
|
292
304
|
});
|
|
293
|
-
}, [getColumnWidth, visibleSortedColumns]);
|
|
305
|
+
}, [getColumnWidth, getColumnWidthOld, isJumpingColumnFixEnabled, visibleSortedColumns]);
|
|
294
306
|
var loadingRow = (0, _react.useMemo)(function () {
|
|
295
307
|
return {
|
|
296
308
|
key: 'loading',
|
|
@@ -332,14 +344,14 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
332
344
|
source = _ref9.source;
|
|
333
345
|
initialAutoScrollerClientY.current = location.current.input.clientY;
|
|
334
346
|
if (source.data.type === 'table-header') {
|
|
335
|
-
var _containerRef$
|
|
347
|
+
var _containerRef$current2;
|
|
336
348
|
_pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.start({
|
|
337
349
|
input: _objectSpread(_objectSpread({}, location.current.input), {}, {
|
|
338
350
|
clientY:
|
|
339
351
|
// The goal is to have clientY the same and in the middle of the scrollable area
|
|
340
352
|
// Since clientY is taken from to of the viewport we need to plus that in order to get
|
|
341
353
|
// middle of the scrollable area in reference to the viewport
|
|
342
|
-
(initialAutoScrollerClientY.current || 0) + (((_containerRef$
|
|
354
|
+
(initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
|
|
343
355
|
}),
|
|
344
356
|
behavior: 'container-only'
|
|
345
357
|
});
|
|
@@ -349,10 +361,10 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
349
361
|
var location = _ref10.location,
|
|
350
362
|
source = _ref10.source;
|
|
351
363
|
if (source.data.type === 'table-header') {
|
|
352
|
-
var _containerRef$
|
|
364
|
+
var _containerRef$current3;
|
|
353
365
|
_pragmaticDragAndDropReactBeautifulDndAutoscroll.autoScroller.updateInput({
|
|
354
366
|
input: _objectSpread(_objectSpread({}, location.current.input), {}, {
|
|
355
|
-
clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$
|
|
367
|
+
clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0) / 2
|
|
356
368
|
})
|
|
357
369
|
});
|
|
358
370
|
}
|
|
@@ -410,7 +422,7 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
410
422
|
wrappedColumnKeys: wrappedColumnKeys,
|
|
411
423
|
renderItem: renderItem
|
|
412
424
|
}),
|
|
413
|
-
width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
|
|
425
|
+
width: isJumpingColumnFixEnabled ? getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1) : getColumnWidthOld(key, type, cellIndex === visibleSortedColumns.length - 1)
|
|
414
426
|
};
|
|
415
427
|
}),
|
|
416
428
|
ref: rowIndex === items.length - 1 ? function (el) {
|
|
@@ -418,7 +430,7 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
418
430
|
} : undefined
|
|
419
431
|
};
|
|
420
432
|
});
|
|
421
|
-
}, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth]);
|
|
433
|
+
}, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth, getColumnWidthOld, isJumpingColumnFixEnabled]);
|
|
422
434
|
var rows = (0, _react.useMemo)(function () {
|
|
423
435
|
if (status !== 'loading') {
|
|
424
436
|
return tableRows;
|
|
@@ -493,8 +505,8 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
493
505
|
} : undefined), {}, {
|
|
494
506
|
"--_11c95on": (0, _runtime.ix)("\n\t\tlinear-gradient(90deg, ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%, rgba(255, 255, 255, 0)),\n\t\tlinear-gradient(90deg, ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))", ", rgba(0, 0, 0, 0)),\n\t\tlinear-gradient(90deg, rgba(255, 255, 255, 0), ", "var(--ds-elevation-surface-current, #FFF)", " 70%),\n\t\tlinear-gradient(90deg, rgba(0, 0, 0, 0), ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))", "),\n\t\tlinear-gradient(0deg, rgba(255, 255, 255, 0), ", "var(--ds-elevation-surface-current, #FFF)", " 30%),\n\t\tlinear-gradient(0deg, rgba(0, 0, 0, 0), ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))", "),\n\t\tlinear-gradient(0deg, ", "var(--ds-elevation-surface-current, #FFF)", " 30%, rgba(255, 255, 255, 0)),\n\t\tlinear-gradient(0deg, ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))", ", rgba(0, 0, 0, 0))\n\t\t"))
|
|
495
507
|
})
|
|
496
|
-
}, /*#__PURE__*/React.createElement(_widthDetector.WidthObserver, {
|
|
497
|
-
setWidth: (0, _debounce.default)(
|
|
508
|
+
}, !isJumpingColumnFixEnabled && /*#__PURE__*/React.createElement(_widthDetector.WidthObserver, {
|
|
509
|
+
setWidth: (0, _debounce.default)(setTableContainerWidthOld, 100)
|
|
498
510
|
}), /*#__PURE__*/React.createElement(Table, {
|
|
499
511
|
"data-testid": testId
|
|
500
512
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
@@ -520,7 +532,7 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
520
532
|
testId: 'datasource-header-content'
|
|
521
533
|
}, /*#__PURE__*/React.createElement("span", {
|
|
522
534
|
id: (0, _utils.getFieldLabelById)(key),
|
|
523
|
-
className: (0, _runtime.ax)(["_k48p1wq8
|
|
535
|
+
className: (0, _runtime.ax)(["_k48p1wq8 _zzcc4f4w _x3fxnil1 _u6rdk9i7 _v2glf7ua"])
|
|
524
536
|
}, content));
|
|
525
537
|
var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
|
|
526
538
|
if (isHeadingOutsideButton) {
|
|
@@ -529,7 +541,7 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
529
541
|
}, heading);
|
|
530
542
|
}
|
|
531
543
|
if (isEditable) {
|
|
532
|
-
var _containerRef$
|
|
544
|
+
var _containerRef$current4;
|
|
533
545
|
var previewRows = tableRows.map(function (_ref15) {
|
|
534
546
|
var cells = _ref15.cells;
|
|
535
547
|
var cell = cells.find(function (_ref16) {
|
|
@@ -551,7 +563,7 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
551
563
|
index: cellIndex,
|
|
552
564
|
width: width,
|
|
553
565
|
onWidthChange: onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize.bind(null, key),
|
|
554
|
-
dndPreviewHeight: ((_containerRef$
|
|
566
|
+
dndPreviewHeight: ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.offsetHeight) || 0,
|
|
555
567
|
dragPreview: dragPreview,
|
|
556
568
|
isWrapped: wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key),
|
|
557
569
|
onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._1bah1h6o{justify-content:center}
|
|
3
3
|
._1e0c1txw{display:flex}
|
|
4
4
|
._1wpz1h6o{align-self:center}
|
|
@@ -26,7 +26,7 @@ export const InitialStateViewNew = () => {
|
|
|
26
26
|
size: "xlarge",
|
|
27
27
|
alt: formatMessage(initialStateViewMessages.searchTitle)
|
|
28
28
|
}) : /*#__PURE__*/React.createElement(CrystalBallSVGOld, null), /*#__PURE__*/React.createElement("div", {
|
|
29
|
-
className: ax(["
|
|
29
|
+
className: ax(["_11c8nbxd _ca0qpxbi _n3tdu2gc"])
|
|
30
30
|
}, formatMessage(initialStateViewMessages.searchTitle)), /*#__PURE__*/React.createElement("div", null, formatMessage(initialStateViewMessages.searchDescription)), /*#__PURE__*/React.createElement("a", {
|
|
31
31
|
href: AQLSupportDocumentLink,
|
|
32
32
|
target: "_blank"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._zulppxbi{gap:var(--ds-space-200,1pc)}
|
|
3
3
|
._1e0c1txw{display:flex}
|
|
4
4
|
._2lx21bp4{flex-direction:column}
|
|
@@ -17,7 +17,7 @@ import { loadingErrorMessages } from './messages';
|
|
|
17
17
|
const styles = {
|
|
18
18
|
iconContainerStyles: "_otyrpxbi",
|
|
19
19
|
descriptionMessageStyles: "_zulppxbi _1e0c1txw _2lx21bp4",
|
|
20
|
-
urlStyles: "
|
|
20
|
+
urlStyles: "_11c82smr _syaznoz8"
|
|
21
21
|
};
|
|
22
22
|
const Description = ({
|
|
23
23
|
message,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
.
|
|
2
|
+
._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
3
|
._zulppxbi{gap:var(--ds-space-200,1pc)}
|
|
4
4
|
._zulpu2gc{gap:var(--ds-space-100,8px)}._10fp1h6o{justify-self:center}
|
|
5
5
|
._1e0c11p5{display:grid}
|
|
@@ -16,7 +16,7 @@ import { loadingErrorMessages } from './messages';
|
|
|
16
16
|
const styles = {
|
|
17
17
|
errorContainerStyles: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _1e0c11p5",
|
|
18
18
|
errorMessageContainerStyles: "_zulpu2gc _4cvr1h6o _6a6z1h6o _1e0c11p5",
|
|
19
|
-
errorMessageStyles: "
|
|
19
|
+
errorMessageStyles: "_11c8nbxd"
|
|
20
20
|
};
|
|
21
21
|
export const LoadingErrorNew = ({
|
|
22
22
|
onRefresh
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._11c8lodh{font:var(--ds-font-heading-medium,normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._zulpu2gc{gap:var(--ds-space-100,8px)}
|
|
3
3
|
._1bah1h6o{justify-content:center}
|
|
4
4
|
._1e0c1o8l{display:inline-block}
|
|
@@ -31,7 +31,7 @@ export const InitialStateViewNew = ({
|
|
|
31
31
|
}, /*#__PURE__*/React.createElement("div", {
|
|
32
32
|
className: ax(["_y3gn1h6o _1wpz1h6o _ca0qoahv _n3tdoahv"])
|
|
33
33
|
}, icon, /*#__PURE__*/React.createElement("div", {
|
|
34
|
-
className: ax(["
|
|
34
|
+
className: ax(["_11c8lodh _zulpu2gc _syaz1rc1 _ca0qpxbi _n3tdu2gc _1e0c1txw _1bah1h6o _4cvr1h6o"])
|
|
35
35
|
}, showBeta && /*#__PURE__*/React.createElement("div", {
|
|
36
36
|
className: ax(["_1e0c1txw"])
|
|
37
37
|
}, /*#__PURE__*/React.createElement(Lozenge, {
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
.
|
|
1
|
+
._11c81o8v{font:var(--ds-font-body-small,normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
|
|
3
3
|
._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
|
|
@@ -25,7 +25,7 @@ const ConcatenatedMenuListNew = ({
|
|
|
25
25
|
};
|
|
26
26
|
const maximumLimitReachedMessage = /*#__PURE__*/React.createElement("div", {
|
|
27
27
|
style: optionStyle,
|
|
28
|
-
className: ax(["
|
|
28
|
+
className: ax(["_11c81o8v _syaz1gjq _k48pi7a9"])
|
|
29
29
|
}, /*#__PURE__*/React.createElement(FormattedMessage, _extends({
|
|
30
30
|
tagName: 'div'
|
|
31
31
|
}, columnPickerMessages.maximumItemsShownLine1)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
.
|
|
2
|
+
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
3
|
._19itidpf, .ProseMirror .pm-table-wrapper>table thead ._aks5idpf, .pm-table-wrapper>table thead ._1u3bidpf{border:0}.ProseMirror .pm-table-wrapper>table thead.has-column-picker ._1hkzidpf:nth-last-of-type(2), .pm-table-wrapper>table thead.has-column-picker ._1r3pidpf:nth-last-of-type(2), thead.has-column-picker ._10i2idpf:nth-last-of-type(2){border-right:0}
|
|
4
4
|
._1ls2idpf:last-of-type, .ProseMirror .pm-table-wrapper>table thead ._ocbzidpf:last-of-type, .pm-table-wrapper>table thead ._3tfiidpf:last-of-type{border-right:0}
|
|
5
5
|
._1s7zl0fh, .ProseMirror .pm-table-wrapper>table thead ._1o9ml0fh, .pm-table-wrapper>table thead ._1oupl0fh{border-right:.5px solid var(--ds-border,#dfe1e6)}
|
|
@@ -64,7 +64,7 @@ const DragColumnPreviewNew = ({
|
|
|
64
64
|
rows
|
|
65
65
|
}) => {
|
|
66
66
|
return /*#__PURE__*/React.createElement("table", {
|
|
67
|
-
className: ax(["
|
|
67
|
+
className: ax(["_11c82smr _bfhkvuon _yq5hus1c _btyzidpf _p12fuuw1"])
|
|
68
68
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(TablePreviewHeading, null, title))), /*#__PURE__*/React.createElement("tbody", null, rows.map((data, i) => /*#__PURE__*/React.createElement("tr", {
|
|
69
69
|
key: i
|
|
70
70
|
}, /*#__PURE__*/React.createElement(TablePreviewCell, null, data))), /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(TablePreviewCell, null, "..."))));
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
._11c82smr, .ProseMirror .pm-table-wrapper>table tbody ._1otx2smr, .pm-table-wrapper>table tbody ._1wi12smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
|
-
.
|
|
3
|
+
._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
4
4
|
._13xs13hi:last-of-type, .ProseMirror .pm-table-wrapper>table thead ._19xw13hi:last-of-type, .pm-table-wrapper>table thead ._ex0g13hi:last-of-type{background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,var(--ds-elevation-surface-current,#fff) 10%)}
|
|
5
5
|
._19itidpf, .ProseMirror .pm-table-wrapper>table tbody ._1i5zidpf, .pm-table-wrapper>table tbody ._aifmidpf{border:0}
|
|
6
6
|
._19itidpf, .ProseMirror .pm-table-wrapper>table thead ._aks5idpf, .pm-table-wrapper>table thead ._1u3bidpf{border:0}
|
|
@@ -181,6 +181,7 @@ const IssueLikeDataTableViewNew = ({
|
|
|
181
181
|
scrollableContainerHeight,
|
|
182
182
|
extensionKey
|
|
183
183
|
}) => {
|
|
184
|
+
var _containerRef$current;
|
|
184
185
|
const tableId = useMemo(() => Symbol('unique-id'), []);
|
|
185
186
|
const experienceId = useDatasourceExperienceId();
|
|
186
187
|
const tableHeaderRowRef = useRef(null);
|
|
@@ -189,18 +190,21 @@ const IssueLikeDataTableViewNew = ({
|
|
|
189
190
|
const isBottomOfTableVisibleRaw = useIsOnScreen(lastRowElement);
|
|
190
191
|
const containerRef = useRef(null);
|
|
191
192
|
const [orderedColumns, setOrderedColumns] = useState(() => getOrderedColumns([...columns], [...visibleColumnKeys]));
|
|
193
|
+
const isJumpingColumnFixEnabled = fg('enable_fix_datasource_jumping_columns');
|
|
192
194
|
|
|
193
195
|
// Table container width is used to know if sum of all column widths is bigger of container or not.
|
|
194
196
|
// When sum of all columns is less than container size we make last column stretchable (width: undefined)
|
|
195
|
-
const [
|
|
197
|
+
const [tableContainerWidthOld, setTableContainerWidthOld] = useState();
|
|
196
198
|
useEffect(() => {
|
|
197
199
|
const {
|
|
198
200
|
current
|
|
199
201
|
} = containerRef;
|
|
200
|
-
if (
|
|
201
|
-
|
|
202
|
+
if (!isJumpingColumnFixEnabled) {
|
|
203
|
+
if (containerRef && current) {
|
|
204
|
+
setTableContainerWidthOld(current.getBoundingClientRect().width);
|
|
205
|
+
}
|
|
202
206
|
}
|
|
203
|
-
}, [containerRef]);
|
|
207
|
+
}, [containerRef, isJumpingColumnFixEnabled]);
|
|
204
208
|
useEffect(() => {
|
|
205
209
|
if (orderedColumns.length !== columns.length) {
|
|
206
210
|
setOrderedColumns(getOrderedColumns([...columns], [...visibleColumnKeys]));
|
|
@@ -225,8 +229,16 @@ const IssueLikeDataTableViewNew = ({
|
|
|
225
229
|
type
|
|
226
230
|
}) => (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type)).reduce((sum, width) => width + sum, 0) + (onVisibleColumnKeysChange ? columnPickerWidth : 0), [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
|
|
227
231
|
const shouldUseWidth = !!(onColumnResize || columnCustomSizes);
|
|
232
|
+
const getColumnWidthOld = useCallback((key, type, isLastCell) => {
|
|
233
|
+
if (isLastCell && shouldUseWidth && (!tableContainerWidthOld || tableContainerWidthOld > columnsWidthsSum)) {
|
|
234
|
+
return undefined;
|
|
235
|
+
} else {
|
|
236
|
+
return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
|
|
237
|
+
}
|
|
238
|
+
}, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidthOld]);
|
|
239
|
+
const tableContainerWidth = isJumpingColumnFixEnabled ? Math.ceil(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width) || 0) : 0;
|
|
228
240
|
const getColumnWidth = useCallback((key, type, isLastCell) => {
|
|
229
|
-
if (isLastCell && shouldUseWidth &&
|
|
241
|
+
if (isLastCell && shouldUseWidth && tableContainerWidth && tableContainerWidth > columnsWidthsSum) {
|
|
230
242
|
return undefined;
|
|
231
243
|
} else {
|
|
232
244
|
return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
|
|
@@ -240,8 +252,8 @@ const IssueLikeDataTableViewNew = ({
|
|
|
240
252
|
key,
|
|
241
253
|
content: title,
|
|
242
254
|
shouldTruncate: true,
|
|
243
|
-
width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
|
|
244
|
-
})), [getColumnWidth, visibleSortedColumns]);
|
|
255
|
+
width: isJumpingColumnFixEnabled ? getColumnWidth(key, type, index === visibleSortedColumns.length - 1) : getColumnWidthOld(key, type, index === visibleSortedColumns.length - 1)
|
|
256
|
+
})), [getColumnWidth, getColumnWidthOld, isJumpingColumnFixEnabled, visibleSortedColumns]);
|
|
245
257
|
const loadingRow = useMemo(() => ({
|
|
246
258
|
key: 'loading',
|
|
247
259
|
cells: headerColumns.map(column => ({
|
|
@@ -280,7 +292,7 @@ const IssueLikeDataTableViewNew = ({
|
|
|
280
292
|
}) => {
|
|
281
293
|
initialAutoScrollerClientY.current = location.current.input.clientY;
|
|
282
294
|
if (source.data.type === 'table-header') {
|
|
283
|
-
var _containerRef$
|
|
295
|
+
var _containerRef$current2;
|
|
284
296
|
autoScroller.start({
|
|
285
297
|
input: {
|
|
286
298
|
...location.current.input,
|
|
@@ -288,7 +300,7 @@ const IssueLikeDataTableViewNew = ({
|
|
|
288
300
|
// The goal is to have clientY the same and in the middle of the scrollable area
|
|
289
301
|
// Since clientY is taken from to of the viewport we need to plus that in order to get
|
|
290
302
|
// middle of the scrollable area in reference to the viewport
|
|
291
|
-
(initialAutoScrollerClientY.current || 0) + (((_containerRef$
|
|
303
|
+
(initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
|
|
292
304
|
},
|
|
293
305
|
behavior: 'container-only'
|
|
294
306
|
});
|
|
@@ -299,11 +311,11 @@ const IssueLikeDataTableViewNew = ({
|
|
|
299
311
|
source
|
|
300
312
|
}) => {
|
|
301
313
|
if (source.data.type === 'table-header') {
|
|
302
|
-
var _containerRef$
|
|
314
|
+
var _containerRef$current3;
|
|
303
315
|
autoScroller.updateInput({
|
|
304
316
|
input: {
|
|
305
317
|
...location.current.input,
|
|
306
|
-
clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$
|
|
318
|
+
clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0) / 2
|
|
307
319
|
}
|
|
308
320
|
});
|
|
309
321
|
}
|
|
@@ -360,12 +372,12 @@ const IssueLikeDataTableViewNew = ({
|
|
|
360
372
|
wrappedColumnKeys: wrappedColumnKeys,
|
|
361
373
|
renderItem: renderItem
|
|
362
374
|
}),
|
|
363
|
-
width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
|
|
375
|
+
width: isJumpingColumnFixEnabled ? getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1) : getColumnWidthOld(key, type, cellIndex === visibleSortedColumns.length - 1)
|
|
364
376
|
};
|
|
365
377
|
}),
|
|
366
378
|
ref: rowIndex === items.length - 1 ? el => setLastRowElement(el) : undefined
|
|
367
379
|
};
|
|
368
|
-
}), [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth]);
|
|
380
|
+
}), [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth, getColumnWidthOld, isJumpingColumnFixEnabled]);
|
|
369
381
|
const rows = useMemo(() => {
|
|
370
382
|
if (status !== 'loading') {
|
|
371
383
|
return tableRows;
|
|
@@ -423,8 +435,8 @@ const IssueLikeDataTableViewNew = ({
|
|
|
423
435
|
} : undefined,
|
|
424
436
|
"data-testid": 'issue-like-table-container',
|
|
425
437
|
className: ax(["_mrkbidpf _1o0zidpf _kqswh2mm", scrollableContainerHeight && "_1reo1wug _18m91wug _vchhusvi _bfhkchd4 _1itk1sfv _ouxlbac2 _12vemgnk _1lrw1sd4 _qmxj1c00"])
|
|
426
|
-
}, /*#__PURE__*/React.createElement(WidthObserver, {
|
|
427
|
-
setWidth: debounce(
|
|
438
|
+
}, !isJumpingColumnFixEnabled && /*#__PURE__*/React.createElement(WidthObserver, {
|
|
439
|
+
setWidth: debounce(setTableContainerWidthOld, 100)
|
|
428
440
|
}), /*#__PURE__*/React.createElement(Table, {
|
|
429
441
|
"data-testid": testId
|
|
430
442
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
@@ -451,7 +463,7 @@ const IssueLikeDataTableViewNew = ({
|
|
|
451
463
|
testId: 'datasource-header-content'
|
|
452
464
|
}, /*#__PURE__*/React.createElement("span", {
|
|
453
465
|
id: getFieldLabelById(key),
|
|
454
|
-
className: ax(["
|
|
466
|
+
className: ax(["_11c8dcr7 _k48p1wq8"])
|
|
455
467
|
}, content));
|
|
456
468
|
const isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
|
|
457
469
|
if (isHeadingOutsideButton) {
|
|
@@ -460,7 +472,7 @@ const IssueLikeDataTableViewNew = ({
|
|
|
460
472
|
}, heading);
|
|
461
473
|
}
|
|
462
474
|
if (isEditable) {
|
|
463
|
-
var _containerRef$
|
|
475
|
+
var _containerRef$current4;
|
|
464
476
|
const previewRows = tableRows.map(({
|
|
465
477
|
cells
|
|
466
478
|
}) => {
|
|
@@ -482,7 +494,7 @@ const IssueLikeDataTableViewNew = ({
|
|
|
482
494
|
index: cellIndex,
|
|
483
495
|
width: width,
|
|
484
496
|
onWidthChange: onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize.bind(null, key),
|
|
485
|
-
dndPreviewHeight: ((_containerRef$
|
|
497
|
+
dndPreviewHeight: ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.offsetHeight) || 0,
|
|
486
498
|
dragPreview: dragPreview,
|
|
487
499
|
isWrapped: wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key),
|
|
488
500
|
onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
|
package/dist/esm/ui/assets-modal/modal/render-assets-content/initial-state-view/index.compiled.css
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
._1bah1h6o{justify-content:center}
|
|
2
2
|
._1e0c1txw{display:flex}
|
|
3
3
|
._1wpz1h6o{align-self:center}
|
|
4
|
-
.
|
|
4
|
+
._1y0bdipb font{xsmall:normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
5
5
|
._4t3i1osq{height:100%}
|
|
6
6
|
._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
|
|
7
7
|
._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
|
|
8
|
-
.
|
|
9
|
-
.
|
|
10
|
-
.
|
|
11
|
-
.
|
|
8
|
+
._pfzw85h9 font{xlarge:normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
9
|
+
._v2gl1yp8 font{small:normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
10
|
+
._wtt4ykg7 font{xxlarge:normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
11
|
+
._x3fx1hgc font{medium:normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
12
12
|
._y3gn1h6o{text-align:center}
|
|
13
|
-
.
|
|
14
|
-
.
|
|
13
|
+
._z7oy1jq3 font{xxsmall:normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
14
|
+
._zzcc1umn font{large:normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
@@ -25,7 +25,7 @@ export var InitialStateViewNew = function InitialStateViewNew() {
|
|
|
25
25
|
size: "xlarge",
|
|
26
26
|
alt: formatMessage(initialStateViewMessages.searchTitle)
|
|
27
27
|
}) : /*#__PURE__*/React.createElement(CrystalBallSVGOld, null), /*#__PURE__*/React.createElement("div", {
|
|
28
|
-
className: ax(["_ca0qpxbi _n3tdu2gc
|
|
28
|
+
className: ax(["_ca0qpxbi _n3tdu2gc _wtt4ykg7 _pfzw85h9 _zzcc1umn _x3fx1hgc _v2gl1yp8 _1y0bdipb _z7oy1jq3"])
|
|
29
29
|
}, formatMessage(initialStateViewMessages.searchTitle)), /*#__PURE__*/React.createElement("div", null, formatMessage(initialStateViewMessages.searchDescription)), /*#__PURE__*/React.createElement("a", {
|
|
30
30
|
href: AQLSupportDocumentLink,
|
|
31
31
|
target: "_blank"
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
.
|
|
1
|
+
._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
2
2
|
._zulppxbi{gap:var(--ds-space-200,1pc)}
|
|
3
3
|
._1e0c1txw{display:flex}
|
|
4
4
|
._2lx21bp4{flex-direction:column}
|
|
@@ -17,7 +17,7 @@ import { loadingErrorMessages } from './messages';
|
|
|
17
17
|
var styles = {
|
|
18
18
|
iconContainerStyles: "_otyrpxbi",
|
|
19
19
|
descriptionMessageStyles: "_zulppxbi _1e0c1txw _2lx21bp4",
|
|
20
|
-
urlStyles: "
|
|
20
|
+
urlStyles: "_11c82smr _syaznoz8"
|
|
21
21
|
};
|
|
22
22
|
var Description = function Description(_ref) {
|
|
23
23
|
var message = _ref.message,
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
|
|
2
|
-
.
|
|
2
|
+
._11c8nbxd{font:var(--ds-font-heading-small,normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
|
|
3
3
|
._zulppxbi{gap:var(--ds-space-200,1pc)}
|
|
4
4
|
._zulpu2gc{gap:var(--ds-space-100,8px)}._10fp1h6o{justify-self:center}
|
|
5
5
|
._1e0c11p5{display:grid}
|
|
@@ -16,7 +16,7 @@ import { loadingErrorMessages } from './messages';
|
|
|
16
16
|
var styles = {
|
|
17
17
|
errorContainerStyles: "_zulppxbi _4cvr1h6o _6a6z1h6o _1wpz1h6o _10fp1h6o _1e0c11p5",
|
|
18
18
|
errorMessageContainerStyles: "_zulpu2gc _4cvr1h6o _6a6z1h6o _1e0c11p5",
|
|
19
|
-
errorMessageStyles: "
|
|
19
|
+
errorMessageStyles: "_11c8nbxd"
|
|
20
20
|
};
|
|
21
21
|
export var LoadingErrorNew = function LoadingErrorNew(_ref) {
|
|
22
22
|
var onRefresh = _ref.onRefresh;
|
|
@@ -3,18 +3,18 @@
|
|
|
3
3
|
._1e0c1o8l{display:inline-block}
|
|
4
4
|
._1e0c1txw{display:flex}
|
|
5
5
|
._1wpz1h6o{align-self:center}
|
|
6
|
-
.
|
|
6
|
+
._1y0bdipb font{xsmall:normal 600 14px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
7
7
|
._4cvr1h6o{align-items:center}
|
|
8
8
|
._4t3i1osq{height:100%}
|
|
9
9
|
._ca0qoahv{padding-top:var(--ds-space-600,3pc)}
|
|
10
10
|
._ca0qpxbi{padding-top:var(--ds-space-200,1pc)}
|
|
11
11
|
._n3tdoahv{padding-bottom:var(--ds-space-600,3pc)}
|
|
12
12
|
._n3tdu2gc{padding-bottom:var(--ds-space-100,8px)}
|
|
13
|
-
.
|
|
13
|
+
._pfzw85h9 font{xlarge:normal 600 29px/2pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
14
14
|
._syazg0pi{color:var(--_1dzgjqk)}
|
|
15
|
-
.
|
|
16
|
-
.
|
|
17
|
-
.
|
|
15
|
+
._v2gl1yp8 font{small:normal 600 1pc/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
16
|
+
._wtt4ykg7 font{xxlarge:normal 500 35px/40px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
17
|
+
._x3fx1hgc font{medium:normal 500 20px/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
18
18
|
._y3gn1h6o{text-align:center}
|
|
19
|
-
.
|
|
20
|
-
.
|
|
19
|
+
._z7oy1jq3 font{xxsmall:normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
20
|
+
._zzcc1umn font{large:normal 500 24px/28px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
@@ -30,7 +30,7 @@ export var InitialStateViewNew = function InitialStateViewNew(_ref) {
|
|
|
30
30
|
}, /*#__PURE__*/React.createElement("div", {
|
|
31
31
|
className: ax(["_y3gn1h6o _1wpz1h6o _ca0qoahv _n3tdoahv"])
|
|
32
32
|
}, icon, /*#__PURE__*/React.createElement("div", {
|
|
33
|
-
className: ax(["_zulpu2gc _syazg0pi _ca0qpxbi _n3tdu2gc _1e0c1txw _1bah1h6o _4cvr1h6o
|
|
33
|
+
className: ax(["_zulpu2gc _syazg0pi _ca0qpxbi _n3tdu2gc _1e0c1txw _1bah1h6o _4cvr1h6o _wtt4ykg7 _pfzw85h9 _zzcc1umn _x3fx1hgc _v2gl1yp8 _1y0bdipb _z7oy1jq3"]),
|
|
34
34
|
style: {
|
|
35
35
|
"--_1dzgjqk": ix("var(--ds-text-subtlest, ".concat(N300, ")"))
|
|
36
36
|
}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
|
|
2
2
|
._syaz1gjq{color:var(--ds-text-subtle,#44546f)}
|
|
3
|
-
.
|
|
4
|
-
.
|
|
5
|
-
.
|
|
6
|
-
.
|
|
3
|
+
._u6rdk9i7 font{-u-n-s-a-f-e_small:normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
4
|
+
._v2glf7ua font{small:normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
5
|
+
._x3fxnil1 font{medium:normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
6
|
+
._zzcc4f4w font{large:normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
@@ -26,7 +26,7 @@ var ConcatenatedMenuListNew = function ConcatenatedMenuListNew(_ref) {
|
|
|
26
26
|
};
|
|
27
27
|
var maximumLimitReachedMessage = /*#__PURE__*/React.createElement("div", {
|
|
28
28
|
style: optionStyle,
|
|
29
|
-
className: ax(["_syaz1gjq _k48pi7a9
|
|
29
|
+
className: ax(["_syaz1gjq _k48pi7a9 _zzcc4f4w _x3fxnil1 _u6rdk9i7 _v2glf7ua"])
|
|
30
30
|
}, /*#__PURE__*/React.createElement(FormattedMessage, _extends({
|
|
31
31
|
tagName: 'div'
|
|
32
32
|
}, columnPickerMessages.maximumItemsShownLine1)), /*#__PURE__*/React.createElement(FormattedMessage, _extends({
|
|
@@ -41,11 +41,11 @@
|
|
|
41
41
|
._s7n4yfq0, .ProseMirror .pm-table-wrapper>table thead ._ntwryfq0, .pm-table-wrapper>table thead ._3eneyfq0{vertical-align:bottom}
|
|
42
42
|
._u5f31b66, .ProseMirror .pm-table-wrapper>table thead ._1pmc1b66, .pm-table-wrapper>table thead ._11ep1b66{padding-right:var(--ds-space-050,4px)}
|
|
43
43
|
._u5f3u2gc{padding-right:var(--ds-space-100,8px)}
|
|
44
|
-
.
|
|
45
|
-
.
|
|
44
|
+
._u6rdk9i7 font{-u-n-s-a-f-e_small:normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
45
|
+
._v2glf7ua font{small:normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
46
46
|
._vchhusvi, .ProseMirror .pm-table-wrapper>table thead ._1wwnusvi, .pm-table-wrapper>table thead ._1gbausvi{box-sizing:border-box}
|
|
47
47
|
._vchhusvi{box-sizing:border-box}
|
|
48
48
|
._vwz41tcg, .ProseMirror .pm-table-wrapper>table thead ._s99e1tcg, .pm-table-wrapper>table thead ._3mvc1tcg{line-height:24px}
|
|
49
|
-
.
|
|
49
|
+
._x3fxnil1 font{medium:normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
50
50
|
._yq5hus1c{border-collapse:separate}
|
|
51
|
-
.
|
|
51
|
+
._zzcc4f4w font{large:normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
@@ -67,7 +67,7 @@ var DragColumnPreviewNew = function DragColumnPreviewNew(_ref4) {
|
|
|
67
67
|
var title = _ref4.title,
|
|
68
68
|
rows = _ref4.rows;
|
|
69
69
|
return /*#__PURE__*/React.createElement("table", {
|
|
70
|
-
className: ax(["_bfhkvuon _yq5hus1c _btyzidpf _p12fuuw1
|
|
70
|
+
className: ax(["_bfhkvuon _yq5hus1c _btyzidpf _p12fuuw1 _zzcc4f4w _x3fxnil1 _u6rdk9i7 _v2glf7ua"])
|
|
71
71
|
}, /*#__PURE__*/React.createElement("thead", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement(TablePreviewHeading, null, title))), /*#__PURE__*/React.createElement("tbody", null, rows.map(function (data, i) {
|
|
72
72
|
return /*#__PURE__*/React.createElement("tr", {
|
|
73
73
|
key: i
|
|
@@ -75,14 +75,14 @@
|
|
|
75
75
|
._s7n4yfq0, .ProseMirror .pm-table-wrapper>table thead ._ntwryfq0, .pm-table-wrapper>table thead ._3eneyfq0{vertical-align:bottom}
|
|
76
76
|
._u5f31b66, .ProseMirror .pm-table-wrapper>table thead ._1pmc1b66, .pm-table-wrapper>table thead ._11ep1b66{padding-right:var(--ds-space-050,4px)}
|
|
77
77
|
._u5f3ze3t, .ProseMirror .pm-table-wrapper>table tbody ._1cngze3t, .pm-table-wrapper>table tbody ._1h12ze3t{padding-right:var(--ds-space-0,0)}
|
|
78
|
-
.
|
|
79
|
-
.
|
|
78
|
+
._u6rdk9i7 font{-u-n-s-a-f-e_small:normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
79
|
+
._v2glf7ua font{small:normal 400 11px/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
80
80
|
._vchh1ntv, .ProseMirror .pm-table-wrapper>table tbody ._16601ntv, .pm-table-wrapper>table tbody ._1qd91ntv{box-sizing:content-box}
|
|
81
81
|
._vchhusvi, .ProseMirror .pm-table-wrapper>table thead ._1wwnusvi, .pm-table-wrapper>table thead ._1gbausvi{box-sizing:border-box}
|
|
82
82
|
._vchhusvi{box-sizing:border-box}
|
|
83
83
|
._vwz41tcg, .ProseMirror .pm-table-wrapper>table thead ._s99e1tcg, .pm-table-wrapper>table thead ._3mvc1tcg{line-height:24px}
|
|
84
|
-
.
|
|
84
|
+
._x3fxnil1 font{medium:normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
85
85
|
._yq5hus1c{border-collapse:separate}
|
|
86
|
-
.
|
|
86
|
+
._zzcc4f4w font{large:normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif}
|
|
87
87
|
._8vu416jk:hover{border-radius:var(--ds-border-radius-200,3px)}
|
|
88
88
|
._irr31d5g:hover{background-color:var(--ds-background-input-hovered,#f7f8f9)}
|
|
@@ -177,6 +177,7 @@ function getDefaultColumnWidth(key, type) {
|
|
|
177
177
|
}
|
|
178
178
|
}
|
|
179
179
|
var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
180
|
+
var _containerRef$current;
|
|
180
181
|
var testId = _ref5.testId,
|
|
181
182
|
onNextPage = _ref5.onNextPage,
|
|
182
183
|
onLoadDatasourceDetails = _ref5.onLoadDatasourceDetails,
|
|
@@ -216,19 +217,22 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
216
217
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
217
218
|
orderedColumns = _useState6[0],
|
|
218
219
|
setOrderedColumns = _useState6[1];
|
|
220
|
+
var isJumpingColumnFixEnabled = fg('enable_fix_datasource_jumping_columns');
|
|
219
221
|
|
|
220
222
|
// Table container width is used to know if sum of all column widths is bigger of container or not.
|
|
221
223
|
// When sum of all columns is less than container size we make last column stretchable (width: undefined)
|
|
222
224
|
var _useState7 = useState(),
|
|
223
225
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
224
|
-
|
|
225
|
-
|
|
226
|
+
tableContainerWidthOld = _useState8[0],
|
|
227
|
+
setTableContainerWidthOld = _useState8[1];
|
|
226
228
|
useEffect(function () {
|
|
227
229
|
var current = containerRef.current;
|
|
228
|
-
if (
|
|
229
|
-
|
|
230
|
+
if (!isJumpingColumnFixEnabled) {
|
|
231
|
+
if (containerRef && current) {
|
|
232
|
+
setTableContainerWidthOld(current.getBoundingClientRect().width);
|
|
233
|
+
}
|
|
230
234
|
}
|
|
231
|
-
}, [containerRef]);
|
|
235
|
+
}, [containerRef, isJumpingColumnFixEnabled]);
|
|
232
236
|
useEffect(function () {
|
|
233
237
|
if (orderedColumns.length !== columns.length) {
|
|
234
238
|
setOrderedColumns(getOrderedColumns(_toConsumableArray(columns), _toConsumableArray(visibleColumnKeys)));
|
|
@@ -263,8 +267,16 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
263
267
|
}, 0) + (onVisibleColumnKeysChange ? columnPickerWidth : 0);
|
|
264
268
|
}, [columnCustomSizes, onVisibleColumnKeysChange, visibleSortedColumns]);
|
|
265
269
|
var shouldUseWidth = !!(onColumnResize || columnCustomSizes);
|
|
270
|
+
var getColumnWidthOld = useCallback(function (key, type, isLastCell) {
|
|
271
|
+
if (isLastCell && shouldUseWidth && (!tableContainerWidthOld || tableContainerWidthOld > columnsWidthsSum)) {
|
|
272
|
+
return undefined;
|
|
273
|
+
} else {
|
|
274
|
+
return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
|
|
275
|
+
}
|
|
276
|
+
}, [columnCustomSizes, columnsWidthsSum, shouldUseWidth, tableContainerWidthOld]);
|
|
277
|
+
var tableContainerWidth = isJumpingColumnFixEnabled ? Math.ceil(((_containerRef$current = containerRef.current) === null || _containerRef$current === void 0 ? void 0 : _containerRef$current.getBoundingClientRect().width) || 0) : 0;
|
|
266
278
|
var getColumnWidth = useCallback(function (key, type, isLastCell) {
|
|
267
|
-
if (isLastCell && shouldUseWidth &&
|
|
279
|
+
if (isLastCell && shouldUseWidth && tableContainerWidth && tableContainerWidth > columnsWidthsSum) {
|
|
268
280
|
return undefined;
|
|
269
281
|
} else {
|
|
270
282
|
return (columnCustomSizes === null || columnCustomSizes === void 0 ? void 0 : columnCustomSizes[key]) || getDefaultColumnWidth(key, type);
|
|
@@ -279,10 +291,10 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
279
291
|
key: key,
|
|
280
292
|
content: title,
|
|
281
293
|
shouldTruncate: true,
|
|
282
|
-
width: getColumnWidth(key, type, index === visibleSortedColumns.length - 1)
|
|
294
|
+
width: isJumpingColumnFixEnabled ? getColumnWidth(key, type, index === visibleSortedColumns.length - 1) : getColumnWidthOld(key, type, index === visibleSortedColumns.length - 1)
|
|
283
295
|
};
|
|
284
296
|
});
|
|
285
|
-
}, [getColumnWidth, visibleSortedColumns]);
|
|
297
|
+
}, [getColumnWidth, getColumnWidthOld, isJumpingColumnFixEnabled, visibleSortedColumns]);
|
|
286
298
|
var loadingRow = useMemo(function () {
|
|
287
299
|
return {
|
|
288
300
|
key: 'loading',
|
|
@@ -324,14 +336,14 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
324
336
|
source = _ref9.source;
|
|
325
337
|
initialAutoScrollerClientY.current = location.current.input.clientY;
|
|
326
338
|
if (source.data.type === 'table-header') {
|
|
327
|
-
var _containerRef$
|
|
339
|
+
var _containerRef$current2;
|
|
328
340
|
autoScroller.start({
|
|
329
341
|
input: _objectSpread(_objectSpread({}, location.current.input), {}, {
|
|
330
342
|
clientY:
|
|
331
343
|
// The goal is to have clientY the same and in the middle of the scrollable area
|
|
332
344
|
// Since clientY is taken from to of the viewport we need to plus that in order to get
|
|
333
345
|
// middle of the scrollable area in reference to the viewport
|
|
334
|
-
(initialAutoScrollerClientY.current || 0) + (((_containerRef$
|
|
346
|
+
(initialAutoScrollerClientY.current || 0) + (((_containerRef$current2 = containerRef.current) === null || _containerRef$current2 === void 0 ? void 0 : _containerRef$current2.offsetHeight) || 0) / 2
|
|
335
347
|
}),
|
|
336
348
|
behavior: 'container-only'
|
|
337
349
|
});
|
|
@@ -341,10 +353,10 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
341
353
|
var location = _ref10.location,
|
|
342
354
|
source = _ref10.source;
|
|
343
355
|
if (source.data.type === 'table-header') {
|
|
344
|
-
var _containerRef$
|
|
356
|
+
var _containerRef$current3;
|
|
345
357
|
autoScroller.updateInput({
|
|
346
358
|
input: _objectSpread(_objectSpread({}, location.current.input), {}, {
|
|
347
|
-
clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$
|
|
359
|
+
clientY: (initialAutoScrollerClientY.current || 0) + (((_containerRef$current3 = containerRef.current) === null || _containerRef$current3 === void 0 ? void 0 : _containerRef$current3.offsetHeight) || 0) / 2
|
|
348
360
|
})
|
|
349
361
|
});
|
|
350
362
|
}
|
|
@@ -402,7 +414,7 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
402
414
|
wrappedColumnKeys: wrappedColumnKeys,
|
|
403
415
|
renderItem: renderItem
|
|
404
416
|
}),
|
|
405
|
-
width: getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1)
|
|
417
|
+
width: isJumpingColumnFixEnabled ? getColumnWidth(key, type, cellIndex === visibleSortedColumns.length - 1) : getColumnWidthOld(key, type, cellIndex === visibleSortedColumns.length - 1)
|
|
406
418
|
};
|
|
407
419
|
}),
|
|
408
420
|
ref: rowIndex === items.length - 1 ? function (el) {
|
|
@@ -410,7 +422,7 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
410
422
|
} : undefined
|
|
411
423
|
};
|
|
412
424
|
});
|
|
413
|
-
}, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth]);
|
|
425
|
+
}, [items, itemIds, renderItem, wrappedColumnKeys, visibleSortedColumns, getColumnWidth, getColumnWidthOld, isJumpingColumnFixEnabled]);
|
|
414
426
|
var rows = useMemo(function () {
|
|
415
427
|
if (status !== 'loading') {
|
|
416
428
|
return tableRows;
|
|
@@ -485,8 +497,8 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
485
497
|
} : undefined), {}, {
|
|
486
498
|
"--_11c95on": ix("\n\t\tlinear-gradient(90deg, ".concat("var(--ds-elevation-surface-current, #FFF)", " 30%, rgba(255, 255, 255, 0)),\n\t\tlinear-gradient(90deg, ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))", ", rgba(0, 0, 0, 0)),\n\t\tlinear-gradient(90deg, rgba(255, 255, 255, 0), ", "var(--ds-elevation-surface-current, #FFF)", " 70%),\n\t\tlinear-gradient(90deg, rgba(0, 0, 0, 0), ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.1))", "),\n\t\tlinear-gradient(0deg, rgba(255, 255, 255, 0), ", "var(--ds-elevation-surface-current, #FFF)", " 30%),\n\t\tlinear-gradient(0deg, rgba(0, 0, 0, 0), ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))", "),\n\t\tlinear-gradient(0deg, ", "var(--ds-elevation-surface-current, #FFF)", " 30%, rgba(255, 255, 255, 0)),\n\t\tlinear-gradient(0deg, ", "var(--ds-shadow-overflow-perimeter, rgba(0, 0, 0, 0.05))", ", rgba(0, 0, 0, 0))\n\t\t"))
|
|
487
499
|
})
|
|
488
|
-
}, /*#__PURE__*/React.createElement(WidthObserver, {
|
|
489
|
-
setWidth: debounce(
|
|
500
|
+
}, !isJumpingColumnFixEnabled && /*#__PURE__*/React.createElement(WidthObserver, {
|
|
501
|
+
setWidth: debounce(setTableContainerWidthOld, 100)
|
|
490
502
|
}), /*#__PURE__*/React.createElement(Table, {
|
|
491
503
|
"data-testid": testId
|
|
492
504
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
@@ -512,7 +524,7 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
512
524
|
testId: 'datasource-header-content'
|
|
513
525
|
}, /*#__PURE__*/React.createElement("span", {
|
|
514
526
|
id: getFieldLabelById(key),
|
|
515
|
-
className: ax(["_k48p1wq8
|
|
527
|
+
className: ax(["_k48p1wq8 _zzcc4f4w _x3fxnil1 _u6rdk9i7 _v2glf7ua"])
|
|
516
528
|
}, content));
|
|
517
529
|
var isHeadingOutsideButton = !isEditable || !onWrappedColumnChange;
|
|
518
530
|
if (isHeadingOutsideButton) {
|
|
@@ -521,7 +533,7 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
521
533
|
}, heading);
|
|
522
534
|
}
|
|
523
535
|
if (isEditable) {
|
|
524
|
-
var _containerRef$
|
|
536
|
+
var _containerRef$current4;
|
|
525
537
|
var previewRows = tableRows.map(function (_ref15) {
|
|
526
538
|
var cells = _ref15.cells;
|
|
527
539
|
var cell = cells.find(function (_ref16) {
|
|
@@ -543,7 +555,7 @@ var IssueLikeDataTableViewNew = function IssueLikeDataTableViewNew(_ref5) {
|
|
|
543
555
|
index: cellIndex,
|
|
544
556
|
width: width,
|
|
545
557
|
onWidthChange: onColumnResize === null || onColumnResize === void 0 ? void 0 : onColumnResize.bind(null, key),
|
|
546
|
-
dndPreviewHeight: ((_containerRef$
|
|
558
|
+
dndPreviewHeight: ((_containerRef$current4 = containerRef.current) === null || _containerRef$current4 === void 0 ? void 0 : _containerRef$current4.offsetHeight) || 0,
|
|
547
559
|
dragPreview: dragPreview,
|
|
548
560
|
isWrapped: wrappedColumnKeys === null || wrappedColumnKeys === void 0 ? void 0 : wrappedColumnKeys.includes(key),
|
|
549
561
|
onIsWrappedChange: onWrappedColumnChange === null || onWrappedColumnChange === void 0 ? void 0 : onWrappedColumnChange.bind(null, key)
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/link-datasource",
|
|
3
|
-
"version": "3.22.
|
|
3
|
+
"version": "3.22.7",
|
|
4
4
|
"description": "UI Components to support linking platform dataset feature",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -83,7 +83,7 @@
|
|
|
83
83
|
"@atlaskit/tag": "^14.0.0",
|
|
84
84
|
"@atlaskit/textfield": "^8.0.0",
|
|
85
85
|
"@atlaskit/theme": "^18.0.0",
|
|
86
|
-
"@atlaskit/tokens": "^4.
|
|
86
|
+
"@atlaskit/tokens": "^4.5.0",
|
|
87
87
|
"@atlaskit/tooltip": "^20.0.0",
|
|
88
88
|
"@atlaskit/ufo": "^0.4.0",
|
|
89
89
|
"@atlaskit/width-detector": "^5.0.0",
|
|
@@ -197,6 +197,9 @@
|
|
|
197
197
|
},
|
|
198
198
|
"assets_as_an_app_v2": {
|
|
199
199
|
"type": "boolean"
|
|
200
|
+
},
|
|
201
|
+
"enable_fix_datasource_jumping_columns": {
|
|
202
|
+
"type": "boolean"
|
|
200
203
|
}
|
|
201
204
|
}
|
|
202
205
|
}
|