@atlaskit/dynamic-table 14.8.9 → 14.8.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/components/body.js +5 -22
- package/dist/cjs/components/loading-container-advanced.js +17 -61
- package/dist/cjs/components/loading-container.js +5 -23
- package/dist/cjs/components/managed-pagination.js +7 -28
- package/dist/cjs/components/rankable/body.js +12 -41
- package/dist/cjs/components/rankable/table-cell.js +10 -34
- package/dist/cjs/components/rankable/table-head-cell.js +4 -25
- package/dist/cjs/components/rankable/table-row.js +11 -46
- package/dist/cjs/components/stateful.js +23 -54
- package/dist/cjs/components/stateless.js +31 -84
- package/dist/cjs/components/table-head-cell.js +8 -16
- package/dist/cjs/components/table-head.js +12 -42
- package/dist/cjs/components/table-row.js +13 -23
- package/dist/cjs/hoc/with-dimensions.js +6 -27
- package/dist/cjs/hoc/with-sorted-page-rows.js +27 -64
- package/dist/cjs/index.js +0 -3
- package/dist/cjs/internal/helpers.js +9 -30
- package/dist/cjs/styled/constants.js +3 -9
- package/dist/cjs/styled/dynamic-table.js +4 -20
- package/dist/cjs/styled/empty-body.js +3 -10
- package/dist/cjs/styled/loading-container-advanced.js +5 -15
- package/dist/cjs/styled/loading-container.js +5 -15
- package/dist/cjs/styled/rankable/row-placeholder.js +6 -9
- package/dist/cjs/styled/rankable/table-cell.js +6 -12
- package/dist/cjs/styled/rankable/table-row.js +4 -11
- package/dist/cjs/styled/table-cell.js +8 -15
- package/dist/cjs/styled/table-head.js +12 -31
- package/dist/cjs/styled/table-row.js +5 -11
- package/dist/cjs/theme.js +0 -5
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/body.js +0 -3
- package/dist/es2019/components/loading-container-advanced.js +7 -40
- package/dist/es2019/components/loading-container.js +0 -2
- package/dist/es2019/components/managed-pagination.js +2 -5
- package/dist/es2019/components/rankable/body.js +0 -8
- package/dist/es2019/components/rankable/table-cell.js +0 -1
- package/dist/es2019/components/rankable/table-head-cell.js +0 -3
- package/dist/es2019/components/rankable/table-row.js +2 -7
- package/dist/es2019/components/stateful.js +0 -14
- package/dist/es2019/components/stateless.js +3 -34
- package/dist/es2019/components/table-head-cell.js +2 -4
- package/dist/es2019/components/table-head.js +2 -10
- package/dist/es2019/components/table-row.js +2 -3
- package/dist/es2019/hoc/with-dimensions.js +4 -11
- package/dist/es2019/hoc/with-sorted-page-rows.js +16 -33
- package/dist/es2019/internal/helpers.js +6 -11
- package/dist/es2019/styled/constants.js +3 -3
- package/dist/es2019/styled/dynamic-table.js +1 -5
- package/dist/es2019/styled/empty-body.js +1 -1
- package/dist/es2019/styled/loading-container-advanced.js +3 -5
- package/dist/es2019/styled/loading-container.js +1 -1
- package/dist/es2019/styled/rankable/row-placeholder.js +6 -5
- package/dist/es2019/styled/rankable/table-cell.js +5 -4
- package/dist/es2019/styled/rankable/table-row.js +2 -2
- package/dist/es2019/styled/table-cell.js +7 -5
- package/dist/es2019/styled/table-head.js +4 -5
- package/dist/es2019/styled/table-row.js +2 -2
- package/dist/es2019/types.js +1 -0
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/body.js +5 -15
- package/dist/esm/components/loading-container-advanced.js +17 -65
- package/dist/esm/components/loading-container.js +5 -16
- package/dist/esm/components/managed-pagination.js +7 -23
- package/dist/esm/components/rankable/body.js +12 -30
- package/dist/esm/components/rankable/table-cell.js +10 -21
- package/dist/esm/components/rankable/table-head-cell.js +4 -15
- package/dist/esm/components/rankable/table-row.js +11 -31
- package/dist/esm/components/stateful.js +23 -51
- package/dist/esm/components/stateless.js +31 -70
- package/dist/esm/components/table-head-cell.js +8 -11
- package/dist/esm/components/table-head.js +12 -33
- package/dist/esm/components/table-row.js +13 -18
- package/dist/esm/hoc/with-dimensions.js +6 -22
- package/dist/esm/hoc/with-sorted-page-rows.js +27 -54
- package/dist/esm/internal/helpers.js +9 -16
- package/dist/esm/styled/constants.js +3 -3
- package/dist/esm/styled/dynamic-table.js +4 -10
- package/dist/esm/styled/empty-body.js +3 -3
- package/dist/esm/styled/loading-container-advanced.js +5 -8
- package/dist/esm/styled/loading-container.js +5 -6
- package/dist/esm/styled/rankable/row-placeholder.js +6 -5
- package/dist/esm/styled/rankable/table-cell.js +7 -7
- package/dist/esm/styled/rankable/table-row.js +4 -5
- package/dist/esm/styled/table-cell.js +11 -10
- package/dist/esm/styled/table-head.js +12 -19
- package/dist/esm/styled/table-row.js +5 -6
- package/dist/esm/types.js +1 -0
- package/dist/esm/version.json +1 -1
- package/package.json +2 -2
|
@@ -9,123 +9,99 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
|
9
9
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
10
10
|
import _typeof from "@babel/runtime/helpers/typeof";
|
|
11
11
|
var _excluded = ["rows", "head", "sortKey", "sortOrder", "rowsPerPage", "page"];
|
|
12
|
-
|
|
13
12
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
14
|
-
|
|
15
13
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
16
|
-
|
|
17
14
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
|
|
18
|
-
|
|
19
15
|
function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
|
|
20
|
-
|
|
21
16
|
import React from 'react';
|
|
22
17
|
import { ASC } from '../internal/constants';
|
|
23
18
|
import { getPageRows, validateSortKey } from '../internal/helpers';
|
|
24
|
-
|
|
25
19
|
// sort all rows based on sort key and order
|
|
26
20
|
var getSortedRows = function getSortedRows(head, rows, sortKey, sortOrder) {
|
|
27
21
|
if (!sortKey || !head) {
|
|
28
22
|
return rows;
|
|
29
23
|
}
|
|
30
|
-
|
|
31
24
|
if (!rows) {
|
|
32
25
|
return [];
|
|
33
|
-
}
|
|
34
|
-
|
|
26
|
+
}
|
|
35
27
|
|
|
28
|
+
// return value which will be used for sorting
|
|
36
29
|
var getSortingCellValue = function getSortingCellValue(cells) {
|
|
37
30
|
for (var i = 0; i < cells.length; i++) {
|
|
38
31
|
if (head.cells[i] && head.cells[i].key === sortKey) {
|
|
39
32
|
return cells[i].key;
|
|
40
33
|
}
|
|
41
34
|
}
|
|
42
|
-
|
|
43
35
|
return undefined;
|
|
44
|
-
};
|
|
36
|
+
};
|
|
45
37
|
|
|
38
|
+
// Get copy of rows to avoid sorting prop in place
|
|
39
|
+
var sortableRows = Array.from(rows);
|
|
46
40
|
|
|
47
|
-
|
|
41
|
+
// Reorder rows in table based on sorting cell value
|
|
48
42
|
// Algorithm will sort numerics or strings, but not both
|
|
49
|
-
|
|
50
43
|
return sortableRows.sort(function (a, b) {
|
|
51
44
|
var valA = getSortingCellValue(a.cells);
|
|
52
|
-
var valB = getSortingCellValue(b.cells);
|
|
45
|
+
var valB = getSortingCellValue(b.cells);
|
|
53
46
|
|
|
47
|
+
// modifier used for sorting type (ascending or descending)
|
|
54
48
|
var modifier = sortOrder === ASC ? 1 : -1;
|
|
55
|
-
|
|
56
49
|
if (valA === undefined || valB === undefined) {
|
|
57
50
|
return modifier;
|
|
58
51
|
}
|
|
59
|
-
|
|
60
52
|
if (_typeof(valA) !== _typeof(valB)) {
|
|
61
53
|
// numbers are always grouped higher in the sort
|
|
62
54
|
if (typeof valA === 'number') {
|
|
63
55
|
return -1;
|
|
64
56
|
}
|
|
65
|
-
|
|
66
57
|
if (typeof valB === 'number') {
|
|
67
58
|
return 1;
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
|
|
59
|
+
}
|
|
60
|
+
// strings are grouped next
|
|
71
61
|
if (typeof valA === 'string') {
|
|
72
62
|
return -1;
|
|
73
63
|
}
|
|
74
|
-
|
|
75
64
|
if (typeof valB === 'string') {
|
|
76
65
|
return 1;
|
|
77
66
|
}
|
|
78
|
-
}
|
|
79
|
-
|
|
67
|
+
}
|
|
80
68
|
|
|
69
|
+
// Sort strings using localeCompare
|
|
81
70
|
if (typeof valA === 'string' && typeof valB === 'string') {
|
|
82
71
|
return modifier * valA.localeCompare(valB, undefined, {
|
|
83
72
|
sensitivity: 'accent',
|
|
84
73
|
numeric: true
|
|
85
74
|
});
|
|
86
75
|
}
|
|
87
|
-
|
|
88
76
|
if (!valA && valA !== 0 || valA < valB) {
|
|
89
77
|
return -modifier;
|
|
90
78
|
}
|
|
91
|
-
|
|
92
79
|
if (!valB && valB !== 0 || valA > valB) {
|
|
93
80
|
return modifier;
|
|
94
81
|
}
|
|
95
|
-
|
|
96
82
|
if (valA === valB) {
|
|
97
83
|
return 0;
|
|
98
84
|
}
|
|
99
|
-
|
|
100
85
|
return 1;
|
|
101
86
|
});
|
|
102
87
|
};
|
|
103
|
-
|
|
104
88
|
// get one page of data in table, sorting all rows previously
|
|
105
89
|
export default function withSortedPageRows(WrappedComponent) {
|
|
106
90
|
return /*#__PURE__*/function (_React$Component) {
|
|
107
91
|
_inherits(WithSortedPageRows, _React$Component);
|
|
108
|
-
|
|
109
92
|
var _super = _createSuper(WithSortedPageRows);
|
|
110
|
-
|
|
111
93
|
function WithSortedPageRows() {
|
|
112
94
|
var _this;
|
|
113
|
-
|
|
114
95
|
_classCallCheck(this, WithSortedPageRows);
|
|
115
|
-
|
|
116
96
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
117
97
|
args[_key] = arguments[_key];
|
|
118
98
|
}
|
|
119
|
-
|
|
120
99
|
_this = _super.call.apply(_super, [this].concat(args));
|
|
121
|
-
|
|
122
100
|
_defineProperty(_assertThisInitialized(_this), "state", {
|
|
123
101
|
pageRows: []
|
|
124
102
|
});
|
|
125
|
-
|
|
126
103
|
return _this;
|
|
127
104
|
}
|
|
128
|
-
|
|
129
105
|
_createClass(WithSortedPageRows, [{
|
|
130
106
|
key: "componentDidMount",
|
|
131
107
|
value: function componentDidMount() {
|
|
@@ -142,15 +118,15 @@ export default function withSortedPageRows(WrappedComponent) {
|
|
|
142
118
|
key: "render",
|
|
143
119
|
value: function render() {
|
|
144
120
|
var _this$props = this.props,
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
121
|
+
rows = _this$props.rows,
|
|
122
|
+
head = _this$props.head,
|
|
123
|
+
sortKey = _this$props.sortKey,
|
|
124
|
+
sortOrder = _this$props.sortOrder,
|
|
125
|
+
rowsPerPage = _this$props.rowsPerPage,
|
|
126
|
+
page = _this$props.page,
|
|
127
|
+
restProps = _objectWithoutProperties(_this$props, _excluded);
|
|
128
|
+
return /*#__PURE__*/React.createElement(WrappedComponent
|
|
129
|
+
//@ts-expect-error TODO Fix legit TypeScript 3.9.6 improved inference error
|
|
154
130
|
, _extends({
|
|
155
131
|
pageRows: this.state.pageRows,
|
|
156
132
|
head: head
|
|
@@ -160,16 +136,15 @@ export default function withSortedPageRows(WrappedComponent) {
|
|
|
160
136
|
key: "getDerivedStateFromProps",
|
|
161
137
|
value: function getDerivedStateFromProps(props, state) {
|
|
162
138
|
var rows = props.rows,
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
139
|
+
head = props.head,
|
|
140
|
+
sortKey = props.sortKey,
|
|
141
|
+
sortOrder = props.sortOrder,
|
|
142
|
+
page = props.page,
|
|
143
|
+
rowsPerPage = props.rowsPerPage,
|
|
144
|
+
isTotalPagesControlledExternally = props.isTotalPagesControlledExternally;
|
|
169
145
|
validateSortKey(sortKey, head);
|
|
170
146
|
var sortedRows;
|
|
171
147
|
var pageRows;
|
|
172
|
-
|
|
173
148
|
if (isTotalPagesControlledExternally) {
|
|
174
149
|
sortedRows = rows;
|
|
175
150
|
pageRows = rows;
|
|
@@ -177,13 +152,11 @@ export default function withSortedPageRows(WrappedComponent) {
|
|
|
177
152
|
sortedRows = getSortedRows(head, rows, sortKey, sortOrder) || [];
|
|
178
153
|
pageRows = getPageRows(sortedRows, page, rowsPerPage);
|
|
179
154
|
}
|
|
180
|
-
|
|
181
155
|
return _objectSpread(_objectSpread({}, state), {}, {
|
|
182
156
|
pageRows: pageRows
|
|
183
157
|
});
|
|
184
158
|
}
|
|
185
159
|
}]);
|
|
186
|
-
|
|
187
160
|
return WithSortedPageRows;
|
|
188
161
|
}(React.Component);
|
|
189
162
|
}
|
|
@@ -3,14 +3,12 @@ export var getPageRows = function getPageRows(allRows, pageNumber, rowsPerPage)
|
|
|
3
3
|
if (!pageNumber || !rowsPerPage || !allRows.length) {
|
|
4
4
|
return [];
|
|
5
5
|
}
|
|
6
|
-
|
|
7
6
|
return allRows.slice((pageNumber - 1) * rowsPerPage, pageNumber * rowsPerPage);
|
|
8
7
|
};
|
|
9
8
|
export var assertIsSortable = function assertIsSortable(head) {
|
|
10
9
|
if (!head || !head.cells) {
|
|
11
10
|
return;
|
|
12
11
|
}
|
|
13
|
-
|
|
14
12
|
head.cells.forEach(function (cell) {
|
|
15
13
|
if (cell.isSortable && !cell.key) {
|
|
16
14
|
try {
|
|
@@ -26,11 +24,9 @@ export var validateSortKey = function validateSortKey(sortKey, head) {
|
|
|
26
24
|
if (!sortKey) {
|
|
27
25
|
return;
|
|
28
26
|
}
|
|
29
|
-
|
|
30
27
|
var headHasKey = head && head.cells.map(function (cell) {
|
|
31
28
|
return cell.key;
|
|
32
29
|
}).includes(sortKey);
|
|
33
|
-
|
|
34
30
|
if (!headHasKey) {
|
|
35
31
|
try {
|
|
36
32
|
throw Error("Cell with ".concat(sortKey, " key not found in head."));
|
|
@@ -39,48 +35,45 @@ export var validateSortKey = function validateSortKey(sortKey, head) {
|
|
|
39
35
|
console.error(e);
|
|
40
36
|
}
|
|
41
37
|
}
|
|
42
|
-
};
|
|
38
|
+
};
|
|
43
39
|
|
|
40
|
+
// creates inline styles if flag ranking is true
|
|
44
41
|
export var inlineStylesIfRanking = function inlineStylesIfRanking(isRanking, width, height) {
|
|
45
42
|
if (!isRanking) {
|
|
46
43
|
return {};
|
|
47
44
|
}
|
|
48
|
-
|
|
49
45
|
if (height) {
|
|
50
46
|
return {
|
|
51
47
|
width: width,
|
|
52
48
|
height: height
|
|
53
49
|
};
|
|
54
50
|
}
|
|
55
|
-
|
|
56
51
|
return {
|
|
57
52
|
width: width
|
|
58
53
|
};
|
|
59
|
-
};
|
|
54
|
+
};
|
|
60
55
|
|
|
56
|
+
// computes index of dropped item after ranking
|
|
61
57
|
export var computeIndex = function computeIndex(index, page, rowsPerPage) {
|
|
62
58
|
var itemOnPreviousPages = rowsPerPage && isFinite(rowsPerPage) ? (page - 1) * rowsPerPage : 0;
|
|
63
59
|
return index + itemOnPreviousPages;
|
|
64
|
-
};
|
|
60
|
+
};
|
|
65
61
|
|
|
62
|
+
// reorder rows in table after ranking
|
|
66
63
|
export var reorderRows = function reorderRows(rankEnd, rows) {
|
|
67
64
|
var page = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 1;
|
|
68
65
|
var rowsPerPage = arguments.length > 3 ? arguments[3] : undefined;
|
|
69
66
|
var destination = rankEnd.destination,
|
|
70
|
-
|
|
71
|
-
|
|
67
|
+
sourceIndex = rankEnd.sourceIndex;
|
|
72
68
|
if (!destination) {
|
|
73
69
|
return rows;
|
|
74
70
|
}
|
|
75
|
-
|
|
76
71
|
var fromIndex = computeIndex(sourceIndex, page, rowsPerPage);
|
|
77
72
|
var toIndex = computeIndex(destination.index, page, rowsPerPage);
|
|
78
73
|
var reordered = rows.slice();
|
|
79
|
-
|
|
80
74
|
var _reordered$splice = reordered.splice(fromIndex, 1),
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
75
|
+
_reordered$splice2 = _slicedToArray(_reordered$splice, 1),
|
|
76
|
+
removed = _reordered$splice2[0];
|
|
84
77
|
reordered.splice(toIndex, 0, removed);
|
|
85
78
|
return reordered;
|
|
86
79
|
};
|
|
@@ -16,15 +16,15 @@ export var getTruncationStyleVars = function getTruncationStyleVars(_ref) {
|
|
|
16
16
|
return typeof width !== 'undefined' ? _defineProperty({}, CSS_VAR_WIDTH, "".concat(width, "%")) : undefined;
|
|
17
17
|
};
|
|
18
18
|
export var cellStyles = css({
|
|
19
|
-
padding: "var(--ds-
|
|
19
|
+
padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
|
|
20
20
|
border: 'none',
|
|
21
21
|
textAlign: 'left',
|
|
22
22
|
'&:first-of-type': {
|
|
23
23
|
// TODO Delete this comment after verifying spacing token -> previous value `0`
|
|
24
|
-
paddingLeft: "var(--ds-
|
|
24
|
+
paddingLeft: "var(--ds-space-0, 0px)"
|
|
25
25
|
},
|
|
26
26
|
'&:last-child': {
|
|
27
27
|
// TODO Delete this comment after verifying spacing token -> previous value `0`
|
|
28
|
-
paddingRight: "var(--ds-
|
|
28
|
+
paddingRight: "var(--ds-space-0, 0px)"
|
|
29
29
|
}
|
|
30
30
|
});
|
|
@@ -2,9 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
4
|
var _excluded = ["isFixedSize", "hasDataRow", "children"];
|
|
5
|
-
|
|
6
5
|
/* eslint-disable @repo/internal/react/require-jsdoc */
|
|
7
|
-
|
|
8
6
|
/** @jsx jsx */
|
|
9
7
|
import { forwardRef } from 'react';
|
|
10
8
|
import { css, jsx } from '@emotion/react';
|
|
@@ -32,12 +30,10 @@ var bodyBorder = css({
|
|
|
32
30
|
});
|
|
33
31
|
export var Table = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
34
32
|
var _ref2;
|
|
35
|
-
|
|
36
33
|
var isFixedSize = _ref.isFixedSize,
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
34
|
+
hasDataRow = _ref.hasDataRow,
|
|
35
|
+
children = _ref.children,
|
|
36
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
41
37
|
return jsx("table", _extends({
|
|
42
38
|
style: (_ref2 = {}, _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HOVER_BACKGROUND, row.hoverBackground), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HIGHLIGHTED_BACKGROUND, row.highlightedBackground), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, row.hoverHighlightedBackground), _defineProperty(_ref2, tableRowCSSVars.CSS_VAR_ROW_FOCUS_OUTLINE, row.focusOutline), _ref2),
|
|
43
39
|
css: [tableStyles, isFixedSize && fixedSizeTableStyles, hasDataRow && bodyBorder],
|
|
@@ -46,15 +42,13 @@ export var Table = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
46
42
|
});
|
|
47
43
|
var captionStyles = css({
|
|
48
44
|
marginTop: "".concat(gridSize * 3.5, "px"),
|
|
49
|
-
|
|
50
|
-
marginBottom: "var(--ds-scale-100, 8px)",
|
|
45
|
+
marginBottom: "var(--ds-space-100, 8px)",
|
|
51
46
|
fontSize: '1.42857143em',
|
|
52
47
|
fontStyle: 'inherit',
|
|
53
48
|
fontWeight: "var(--ds-font-weight-medium, 500)",
|
|
54
49
|
letterSpacing: '-0.008em',
|
|
55
50
|
lineHeight: 1.2,
|
|
56
51
|
textAlign: 'left',
|
|
57
|
-
|
|
58
52
|
/* there is a bug in Safari: if element which creates a new stacking context
|
|
59
53
|
is a child of a table, table caption re-renders in bad wrong position
|
|
60
54
|
https://stackoverflow.com/questions/44009186/safari-bug-translating-table-row-group-using-gsap-make-caption-jump-to-bottom
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/* eslint-disable @repo/internal/react/require-jsdoc */
|
|
2
|
-
|
|
3
2
|
/** @jsx jsx */
|
|
3
|
+
|
|
4
4
|
import { css, jsx } from '@emotion/react';
|
|
5
5
|
import { gridSize } from '@atlaskit/theme/constants';
|
|
6
6
|
var fixedHeightStyles = css({
|
|
@@ -8,7 +8,7 @@ var fixedHeightStyles = css({
|
|
|
8
8
|
});
|
|
9
9
|
export var EmptyViewWithFixedHeight = function EmptyViewWithFixedHeight(_ref) {
|
|
10
10
|
var children = _ref.children,
|
|
11
|
-
|
|
11
|
+
testId = _ref.testId;
|
|
12
12
|
return jsx("div", {
|
|
13
13
|
css: fixedHeightStyles,
|
|
14
14
|
"data-testid": testId && "".concat(testId, "--empty-view-with-fixed-height")
|
|
@@ -22,7 +22,7 @@ var emptyViewContainerStyles = css({
|
|
|
22
22
|
});
|
|
23
23
|
export var EmptyViewContainer = function EmptyViewContainer(props) {
|
|
24
24
|
var children = props.children,
|
|
25
|
-
|
|
25
|
+
testId = props.testId;
|
|
26
26
|
return jsx("div", {
|
|
27
27
|
css: emptyViewContainerStyles,
|
|
28
28
|
"data-testid": testId && "".concat(testId, "--empty-view-container")
|
|
@@ -1,22 +1,19 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["testId"];
|
|
4
|
-
|
|
5
4
|
/* eslint-disable @repo/internal/react/require-jsdoc */
|
|
6
|
-
|
|
7
5
|
/** @jsx jsx */
|
|
8
6
|
import { forwardRef } from 'react';
|
|
9
7
|
import { css, jsx } from '@emotion/react';
|
|
10
8
|
var containerStyles = css({
|
|
11
|
-
|
|
12
|
-
marginBottom: "var(--ds-scale-300, 24px)",
|
|
9
|
+
marginBottom: "var(--ds-space-300, 24px)",
|
|
13
10
|
position: 'relative'
|
|
14
11
|
});
|
|
15
12
|
export var Container = function Container(props) {
|
|
16
13
|
var testId = props.testId,
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
rest = _objectWithoutProperties(props, _excluded);
|
|
15
|
+
return (
|
|
16
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
20
17
|
jsx("div", _extends({
|
|
21
18
|
css: containerStyles
|
|
22
19
|
}, rest, {
|
|
@@ -37,7 +34,7 @@ var spinnerBackdropStyles = css({
|
|
|
37
34
|
});
|
|
38
35
|
export var SpinnerBackdrop = function SpinnerBackdrop(_ref) {
|
|
39
36
|
var children = _ref.children,
|
|
40
|
-
|
|
37
|
+
testId = _ref.testId;
|
|
41
38
|
return jsx("div", {
|
|
42
39
|
css: spinnerBackdropStyles,
|
|
43
40
|
"data-testid": testId && "".concat(testId, "--spinner-backdrop")
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
2
|
-
|
|
3
2
|
/* eslint-disable @repo/internal/react/require-jsdoc */
|
|
4
|
-
|
|
5
3
|
/** @jsx jsx */
|
|
4
|
+
|
|
6
5
|
import { css, jsx } from '@emotion/react';
|
|
7
6
|
export var CSS_VAR_CONTENTS_OPACITY = '--contents-opacity';
|
|
8
7
|
var containerStyles = css({
|
|
@@ -10,7 +9,7 @@ var containerStyles = css({
|
|
|
10
9
|
});
|
|
11
10
|
export var Container = function Container(_ref) {
|
|
12
11
|
var children = _ref.children,
|
|
13
|
-
|
|
12
|
+
testId = _ref.testId;
|
|
14
13
|
return jsx("div", {
|
|
15
14
|
css: containerStyles,
|
|
16
15
|
"data-testid": testId && "".concat(testId, "--container")
|
|
@@ -22,8 +21,8 @@ var contentsContainerStyles = css({
|
|
|
22
21
|
});
|
|
23
22
|
export var ContentsContainer = function ContentsContainer(_ref2) {
|
|
24
23
|
var children = _ref2.children,
|
|
25
|
-
|
|
26
|
-
|
|
24
|
+
contentsOpacity = _ref2.contentsOpacity,
|
|
25
|
+
testId = _ref2.testId;
|
|
27
26
|
return jsx("div", {
|
|
28
27
|
style: _defineProperty({}, CSS_VAR_CONTENTS_OPACITY, contentsOpacity),
|
|
29
28
|
css: [contentsContainerStyles],
|
|
@@ -42,7 +41,7 @@ var spinnerContainerStyles = css({
|
|
|
42
41
|
});
|
|
43
42
|
export var SpinnerContainer = function SpinnerContainer(_ref4) {
|
|
44
43
|
var children = _ref4.children,
|
|
45
|
-
|
|
44
|
+
testId = _ref4.testId;
|
|
46
45
|
return jsx("div", {
|
|
47
46
|
css: spinnerContainerStyles,
|
|
48
47
|
"data-testid": testId && "".concat(testId, "--spinner--container")
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
|
|
3
2
|
/** @jsx jsx */
|
|
3
|
+
|
|
4
4
|
import { css, jsx } from '@emotion/react';
|
|
5
5
|
var rowPlaceholderStyles = css({
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
}); // eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
6
|
+
padding: "var(--ds-space-0, 0px)"
|
|
7
|
+
});
|
|
9
8
|
|
|
9
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
10
10
|
export var RowPlaceholderCell = function RowPlaceholderCell(props) {
|
|
11
|
-
return (
|
|
11
|
+
return (
|
|
12
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
12
13
|
jsx("td", _extends({
|
|
13
14
|
css: rowPlaceholderStyles
|
|
14
15
|
}, props))
|
|
@@ -1,22 +1,22 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["isRanking", "innerRef"];
|
|
4
|
-
|
|
5
4
|
/** @jsx jsx */
|
|
5
|
+
|
|
6
6
|
import { css, jsx } from '@emotion/react';
|
|
7
7
|
import { TableBodyCell } from '../table-cell';
|
|
8
8
|
var rankingStyles = css({
|
|
9
9
|
boxSizing: 'border-box'
|
|
10
|
-
});
|
|
10
|
+
});
|
|
11
11
|
|
|
12
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
12
13
|
export var RankableTableBodyCell = function RankableTableBodyCell(_ref) {
|
|
13
14
|
var isRanking = _ref.isRanking,
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
innerRef = _ref.innerRef,
|
|
16
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
17
17
|
return jsx(TableBodyCell, _extends({
|
|
18
|
-
css: isRanking && rankingStyles
|
|
19
|
-
|
|
18
|
+
css: isRanking && rankingStyles
|
|
19
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
20
20
|
}, props, {
|
|
21
21
|
innerRef: innerRef
|
|
22
22
|
}));
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["isRanking", "isRankingItem"];
|
|
4
|
-
|
|
5
4
|
/** @jsx jsx */
|
|
6
5
|
import { forwardRef } from 'react';
|
|
7
6
|
import { css, jsx } from '@emotion/react';
|
|
@@ -21,13 +20,13 @@ var draggableStyles = css({
|
|
|
21
20
|
outlineColor: "var(--ds-border-focused, ".concat(B100, ")"),
|
|
22
21
|
outlineStyle: 'solid'
|
|
23
22
|
}
|
|
24
|
-
});
|
|
23
|
+
});
|
|
25
24
|
|
|
25
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
26
26
|
export var RankableTableBodyRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
27
27
|
var isRanking = _ref.isRanking,
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
isRankingItem = _ref.isRankingItem,
|
|
29
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
31
30
|
return jsx(TableBodyRow, _extends({
|
|
32
31
|
css: [isRanking && rankingStyles, isRankingItem && rankingItemStyles, draggableStyles],
|
|
33
32
|
ref: ref
|
|
@@ -1,26 +1,27 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["width", "isFixedSize", "shouldTruncate", "innerRef"];
|
|
4
|
-
|
|
5
4
|
/** @jsx jsx */
|
|
5
|
+
|
|
6
6
|
import { jsx } from '@emotion/react';
|
|
7
|
-
import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants';
|
|
7
|
+
import { cellStyles, fixedSizeTruncateStyles, getTruncationStyleVars, overflowTruncateStyles, truncationWidthStyles } from './constants';
|
|
8
8
|
|
|
9
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
9
10
|
export var TableBodyCell = function TableBodyCell(_ref) {
|
|
10
11
|
var width = _ref.width,
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
12
|
+
isFixedSize = _ref.isFixedSize,
|
|
13
|
+
shouldTruncate = _ref.shouldTruncate,
|
|
14
|
+
innerRef = _ref.innerRef,
|
|
15
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
16
16
|
return jsx("td", _extends({
|
|
17
17
|
style: getTruncationStyleVars({
|
|
18
18
|
width: width
|
|
19
19
|
}),
|
|
20
|
-
css: [truncationWidthStyles, isFixedSize && shouldTruncate && fixedSizeTruncateStyles, isFixedSize && overflowTruncateStyles, cellStyles]
|
|
20
|
+
css: [truncationWidthStyles, isFixedSize && shouldTruncate && fixedSizeTruncateStyles, isFixedSize && overflowTruncateStyles, cellStyles]
|
|
21
|
+
// HOC withDimensions complains about the types but it is working fine
|
|
21
22
|
// @ts-ignore
|
|
22
23
|
,
|
|
23
|
-
ref: innerRef
|
|
24
|
-
|
|
24
|
+
ref: innerRef
|
|
25
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
25
26
|
}, props));
|
|
26
27
|
};
|
|
@@ -2,14 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
4
|
var _excluded = ["isRanking"],
|
|
5
|
-
|
|
6
|
-
|
|
5
|
+
_excluded2 = ["width", "children", "isSortable", "sortOrder", "isFixedSize", "shouldTruncate", "onClick", "style"];
|
|
7
6
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
8
|
-
|
|
9
7
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
10
|
-
|
|
11
8
|
/* eslint-disable @repo/internal/react/require-jsdoc */
|
|
12
|
-
|
|
13
9
|
/** @jsx jsx */
|
|
14
10
|
import { forwardRef } from 'react';
|
|
15
11
|
import { css, jsx } from '@emotion/react';
|
|
@@ -28,11 +24,10 @@ var headStyles = css({
|
|
|
28
24
|
});
|
|
29
25
|
export var Head = function Head(_ref) {
|
|
30
26
|
var isRanking = _ref.isRanking,
|
|
31
|
-
|
|
32
|
-
|
|
27
|
+
props = _objectWithoutProperties(_ref, _excluded);
|
|
33
28
|
return jsx("thead", _extends({
|
|
34
|
-
css: [headStyles, isRanking && rankingStyles]
|
|
35
|
-
|
|
29
|
+
css: [headStyles, isRanking && rankingStyles]
|
|
30
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
36
31
|
}, props));
|
|
37
32
|
};
|
|
38
33
|
var headCellStyles = css([cellStyles, {
|
|
@@ -120,19 +115,17 @@ var descendingStyles = css({
|
|
|
120
115
|
});
|
|
121
116
|
export var HeadCell = /*#__PURE__*/forwardRef(function (_ref2, ref) {
|
|
122
117
|
var width = _ref2.width,
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
118
|
+
children = _ref2.children,
|
|
119
|
+
isSortable = _ref2.isSortable,
|
|
120
|
+
sortOrder = _ref2.sortOrder,
|
|
121
|
+
isFixedSize = _ref2.isFixedSize,
|
|
122
|
+
shouldTruncate = _ref2.shouldTruncate,
|
|
123
|
+
onClick = _ref2.onClick,
|
|
124
|
+
style = _ref2.style,
|
|
125
|
+
rest = _objectWithoutProperties(_ref2, _excluded2);
|
|
132
126
|
var mergedStyles = _objectSpread(_objectSpread(_objectSpread({}, style), width && getTruncationStyleVars({
|
|
133
127
|
width: width
|
|
134
128
|
})), {}, _defineProperty({}, CSS_VAR_TEXT_COLOR, head.textColor));
|
|
135
|
-
|
|
136
129
|
var isASC = sortOrder === ASC;
|
|
137
130
|
var isDESC = sortOrder === DESC;
|
|
138
131
|
return jsx("th", _extends({
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
var _excluded = ["isHighlighted", "children", "style"];
|
|
4
|
-
|
|
5
4
|
/** @jsx jsx */
|
|
6
5
|
import { forwardRef } from 'react';
|
|
7
6
|
import { css, jsx } from '@emotion/react';
|
|
@@ -23,14 +22,14 @@ var rowHighlightedBackgroundStyles = css({
|
|
|
23
22
|
'&:hover': {
|
|
24
23
|
backgroundColor: "var(--ds-background-selected-hovered, ".concat("var(".concat(cssVars.CSS_VAR_HOVER_HIGHLIGHTED_BACKGROUND, ")"), ")")
|
|
25
24
|
}
|
|
26
|
-
});
|
|
25
|
+
});
|
|
27
26
|
|
|
27
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
28
28
|
export var TableBodyRow = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
29
29
|
var isHighlighted = _ref.isHighlighted,
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
30
|
+
children = _ref.children,
|
|
31
|
+
style = _ref.style,
|
|
32
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
34
33
|
return jsx("tr", _extends({
|
|
35
34
|
style: style,
|
|
36
35
|
css: [rowStyles, isHighlighted ? rowHighlightedBackgroundStyles : rowBackgroundStyles]
|
package/dist/esm/types.js
CHANGED