@atlaskit/dynamic-table 14.8.16 → 14.9.0
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 +16 -0
- package/dist/cjs/components/loading-container-advanced.js +2 -1
- package/dist/cjs/components/stateless.js +2 -2
- package/dist/cjs/components/table-head-cell.js +7 -3
- package/dist/cjs/components/table-head.js +1 -15
- package/dist/cjs/styled/table-head.js +14 -6
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/loading-container-advanced.js +2 -1
- package/dist/es2019/components/stateless.js +2 -2
- package/dist/es2019/components/table-head-cell.js +6 -2
- package/dist/es2019/components/table-head.js +0 -6
- package/dist/es2019/styled/table-head.js +14 -6
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/loading-container-advanced.js +2 -1
- package/dist/esm/components/stateless.js +2 -2
- package/dist/esm/components/table-head-cell.js +7 -3
- package/dist/esm/components/table-head.js +1 -15
- package/dist/esm/styled/table-head.js +14 -6
- package/dist/esm/version.json +1 -1
- package/dist/types/components/table-head-cell.d.ts +1 -2
- package/dist/types/components/table-head.d.ts +1 -2
- package/package.json +11 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/dynamic-table
|
|
2
2
|
|
|
3
|
+
## 14.9.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`56507598609`](https://bitbucket.org/atlassian/atlassian-frontend/commits/56507598609) - Skip minor dependency bump
|
|
8
|
+
|
|
9
|
+
### Patch Changes
|
|
10
|
+
|
|
11
|
+
- Updated dependencies
|
|
12
|
+
|
|
13
|
+
## 14.8.17
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [`cdb1910463d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cdb1910463d) - [ux] Adds buttons to sortable table head cells for better accessibility for keyboard and assistive technology users.
|
|
18
|
+
|
|
3
19
|
## 14.8.16
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
|
@@ -75,6 +75,7 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
|
|
|
75
75
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getThisNode", function () {
|
|
76
76
|
return safeFindDOMNode((0, _assertThisInitialized2.default)(_this));
|
|
77
77
|
});
|
|
78
|
+
// @ts-ignore - this.spinnerRef is not assignable to type 'ReactInstance'
|
|
78
79
|
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getSpinnerNode", function () {
|
|
79
80
|
return safeFindDOMNode(_this.spinnerRef);
|
|
80
81
|
});
|
|
@@ -115,7 +116,7 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
|
|
|
115
116
|
}
|
|
116
117
|
});
|
|
117
118
|
return _this;
|
|
118
|
-
}
|
|
119
|
+
}
|
|
119
120
|
(0, _createClass2.default)(LoadingContainerAdvanced, [{
|
|
120
121
|
key: "attachListeners",
|
|
121
122
|
value: function attachListeners() {
|
|
@@ -29,7 +29,7 @@ var _tableHead = _interopRequireDefault(require("./table-head"));
|
|
|
29
29
|
function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
|
|
30
30
|
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; } }
|
|
31
31
|
var packageName = "@atlaskit/dynamic-table";
|
|
32
|
-
var packageVersion = "14.
|
|
32
|
+
var packageVersion = "14.9.0";
|
|
33
33
|
function toggleSortOrder(currentSortOrder) {
|
|
34
34
|
switch (currentSortOrder) {
|
|
35
35
|
case _constants.DESC:
|
|
@@ -227,7 +227,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
|
|
|
227
227
|
sortKey: sortKey,
|
|
228
228
|
sortOrder: sortOrder,
|
|
229
229
|
isRanking: this.state.isRanking,
|
|
230
|
-
isRankable:
|
|
230
|
+
isRankable: isRankable,
|
|
231
231
|
testId: testId
|
|
232
232
|
}), rowsExist && (canRank ? /*#__PURE__*/_react.default.createElement(_body2.default, (0, _extends2.default)({}, bodyProps, {
|
|
233
233
|
isRanking: this.state.isRanking,
|
|
@@ -9,7 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _react = _interopRequireDefault(require("react"));
|
|
11
11
|
var _tableHead = require("../styled/table-head");
|
|
12
|
-
var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable"];
|
|
12
|
+
var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "onClick"];
|
|
13
13
|
var TableHeadCell = function TableHeadCell(_ref) {
|
|
14
14
|
var content = _ref.content,
|
|
15
15
|
inlineStyles = _ref.inlineStyles,
|
|
@@ -17,6 +17,7 @@ var TableHeadCell = function TableHeadCell(_ref) {
|
|
|
17
17
|
isRanking = _ref.isRanking,
|
|
18
18
|
innerRef = _ref.innerRef,
|
|
19
19
|
isSortable = _ref.isSortable,
|
|
20
|
+
onClick = _ref.onClick,
|
|
20
21
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
21
22
|
return /*#__PURE__*/_react.default.createElement(_tableHead.HeadCell, (0, _extends2.default)({
|
|
22
23
|
style: inlineStyles,
|
|
@@ -24,9 +25,12 @@ var TableHeadCell = function TableHeadCell(_ref) {
|
|
|
24
25
|
ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
|
|
25
26
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
26
27
|
}, rest, {
|
|
27
|
-
|
|
28
|
+
onClick: onClick,
|
|
28
29
|
isSortable: isSortable
|
|
29
|
-
}), /*#__PURE__*/_react.default.createElement("
|
|
30
|
+
}), isSortable ? /*#__PURE__*/_react.default.createElement("button", {
|
|
31
|
+
type: "button",
|
|
32
|
+
"aria-roledescription": "Sort button"
|
|
33
|
+
}, content) : /*#__PURE__*/_react.default.createElement("span", null, content));
|
|
30
34
|
};
|
|
31
35
|
|
|
32
36
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
@@ -9,11 +9,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
|
9
9
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
10
|
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
11
|
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
|
-
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
|
|
13
12
|
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
14
13
|
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
15
14
|
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
16
|
-
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
17
15
|
var _react = _interopRequireDefault(require("react"));
|
|
18
16
|
var _helpers = require("../internal/helpers");
|
|
19
17
|
var _tableHead = require("../styled/table-head");
|
|
@@ -27,16 +25,8 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
27
25
|
(0, _inherits2.default)(TableHead, _React$Component);
|
|
28
26
|
var _super = _createSuper(TableHead);
|
|
29
27
|
function TableHead() {
|
|
30
|
-
var _this;
|
|
31
28
|
(0, _classCallCheck2.default)(this, TableHead);
|
|
32
|
-
|
|
33
|
-
args[_key] = arguments[_key];
|
|
34
|
-
}
|
|
35
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
36
|
-
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "canSortOnEnterPressed", function (e, isSortable) {
|
|
37
|
-
return isSortable && e.key === 'Enter';
|
|
38
|
-
});
|
|
39
|
-
return _this;
|
|
29
|
+
return _super.apply(this, arguments);
|
|
40
30
|
}
|
|
41
31
|
(0, _createClass2.default)(TableHead, [{
|
|
42
32
|
key: "UNSAFE_componentWillMount",
|
|
@@ -53,7 +43,6 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
53
43
|
}, {
|
|
54
44
|
key: "render",
|
|
55
45
|
value: function render() {
|
|
56
|
-
var _this2 = this;
|
|
57
46
|
var _this$props = this.props,
|
|
58
47
|
head = _this$props.head,
|
|
59
48
|
sortKey = _this$props.sortKey,
|
|
@@ -94,9 +83,6 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
94
83
|
isRanking: isRanking,
|
|
95
84
|
key: key || index,
|
|
96
85
|
onClick: isSortable ? onSort(cell) : undefined,
|
|
97
|
-
onKeyDown: function onKeyDown(e) {
|
|
98
|
-
return _this2.canSortOnEnterPressed(e, isSortable) ? onSort(cell)() : undefined;
|
|
99
|
-
},
|
|
100
86
|
testId: cellTestId || testId,
|
|
101
87
|
shouldTruncate: shouldTruncate,
|
|
102
88
|
sortOrder: key === sortKey ? sortOrder : undefined,
|
|
@@ -62,8 +62,16 @@ var onClickStyles = (0, _react2.css)({
|
|
|
62
62
|
}
|
|
63
63
|
});
|
|
64
64
|
var baseStyles = (0, _react2.css)({
|
|
65
|
-
'& >
|
|
65
|
+
'& > button': {
|
|
66
|
+
padding: "var(--ds-space-0, 0)",
|
|
66
67
|
position: 'relative',
|
|
68
|
+
appearance: 'none',
|
|
69
|
+
background: 'none',
|
|
70
|
+
border: 'none',
|
|
71
|
+
color: 'inherit',
|
|
72
|
+
cursor: 'inherit',
|
|
73
|
+
fontSize: 'inherit',
|
|
74
|
+
fontWeight: 'inherit',
|
|
67
75
|
'&::before, &::after': {
|
|
68
76
|
display: 'block',
|
|
69
77
|
width: 0,
|
|
@@ -86,7 +94,7 @@ var baseStyles = (0, _react2.css)({
|
|
|
86
94
|
}
|
|
87
95
|
},
|
|
88
96
|
'@media (forced-colors: active)': {
|
|
89
|
-
'& >
|
|
97
|
+
'& > button': {
|
|
90
98
|
'&::before, &::after': {
|
|
91
99
|
border: "3px solid ".concat(_theme.MSThemeColors.Background)
|
|
92
100
|
},
|
|
@@ -100,13 +108,13 @@ var baseStyles = (0, _react2.css)({
|
|
|
100
108
|
}
|
|
101
109
|
});
|
|
102
110
|
var ascendingStyles = (0, _react2.css)({
|
|
103
|
-
'& >
|
|
111
|
+
'& > button': {
|
|
104
112
|
'&::before': {
|
|
105
113
|
borderBottom: "3px solid ".concat(_theme.arrow.selectedColor)
|
|
106
114
|
}
|
|
107
115
|
},
|
|
108
116
|
'@media (forced-colors: active)': {
|
|
109
|
-
'& >
|
|
117
|
+
'& > button': {
|
|
110
118
|
'&::before': {
|
|
111
119
|
borderBottom: "3px solid ".concat(_theme.MSThemeColors.SelectedBackground)
|
|
112
120
|
}
|
|
@@ -114,13 +122,13 @@ var ascendingStyles = (0, _react2.css)({
|
|
|
114
122
|
}
|
|
115
123
|
});
|
|
116
124
|
var descendingStyles = (0, _react2.css)({
|
|
117
|
-
'& >
|
|
125
|
+
'& > button': {
|
|
118
126
|
'&::after': {
|
|
119
127
|
borderTop: "3px solid ".concat(_theme.arrow.selectedColor)
|
|
120
128
|
}
|
|
121
129
|
},
|
|
122
130
|
'@media (forced-colors: active)': {
|
|
123
|
-
'& >
|
|
131
|
+
'& > button': {
|
|
124
132
|
'&::after': {
|
|
125
133
|
borderTop: "3px solid ".concat(_theme.MSThemeColors.SelectedBackground)
|
|
126
134
|
}
|
package/dist/cjs/version.json
CHANGED
|
@@ -52,6 +52,7 @@ export default class LoadingContainerAdvanced extends React.Component {
|
|
|
52
52
|
return targetNode;
|
|
53
53
|
});
|
|
54
54
|
_defineProperty(this, "getThisNode", () => safeFindDOMNode(this));
|
|
55
|
+
// @ts-ignore - this.spinnerRef is not assignable to type 'ReactInstance'
|
|
55
56
|
_defineProperty(this, "getSpinnerNode", () => safeFindDOMNode(this.spinnerRef));
|
|
56
57
|
_defineProperty(this, "hasTargetNode", nextProps => !!this.getTargetNode(nextProps));
|
|
57
58
|
_defineProperty(this, "isVerticallyVisible", (elementRect, viewportHeight) => {
|
|
@@ -92,7 +93,7 @@ export default class LoadingContainerAdvanced extends React.Component {
|
|
|
92
93
|
targetNode.style.opacity = isLoading ? contentsOpacity.toString() : '';
|
|
93
94
|
}
|
|
94
95
|
});
|
|
95
|
-
}
|
|
96
|
+
}
|
|
96
97
|
attachListeners() {
|
|
97
98
|
window.addEventListener('scroll', this.handleScroll);
|
|
98
99
|
window.addEventListener('resize', this.handleResize);
|
|
@@ -14,7 +14,7 @@ import ManagedPagination from './managed-pagination';
|
|
|
14
14
|
import RankableTableBody from './rankable/body';
|
|
15
15
|
import TableHead from './table-head';
|
|
16
16
|
const packageName = "@atlaskit/dynamic-table";
|
|
17
|
-
const packageVersion = "14.
|
|
17
|
+
const packageVersion = "14.9.0";
|
|
18
18
|
function toggleSortOrder(currentSortOrder) {
|
|
19
19
|
switch (currentSortOrder) {
|
|
20
20
|
case DESC:
|
|
@@ -201,7 +201,7 @@ class DynamicTable extends React.Component {
|
|
|
201
201
|
sortKey: sortKey,
|
|
202
202
|
sortOrder: sortOrder,
|
|
203
203
|
isRanking: this.state.isRanking,
|
|
204
|
-
isRankable:
|
|
204
|
+
isRankable: isRankable,
|
|
205
205
|
testId: testId
|
|
206
206
|
}), rowsExist && (canRank ? /*#__PURE__*/React.createElement(RankableTableBody, _extends({}, bodyProps, {
|
|
207
207
|
isRanking: this.state.isRanking,
|
|
@@ -8,6 +8,7 @@ const TableHeadCell = ({
|
|
|
8
8
|
isRanking,
|
|
9
9
|
innerRef,
|
|
10
10
|
isSortable,
|
|
11
|
+
onClick,
|
|
11
12
|
...rest
|
|
12
13
|
}) => {
|
|
13
14
|
return /*#__PURE__*/React.createElement(HeadCell, _extends({
|
|
@@ -16,9 +17,12 @@ const TableHeadCell = ({
|
|
|
16
17
|
ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
|
|
17
18
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
18
19
|
}, rest, {
|
|
19
|
-
|
|
20
|
+
onClick: onClick,
|
|
20
21
|
isSortable: isSortable
|
|
21
|
-
}), /*#__PURE__*/React.createElement("
|
|
22
|
+
}), isSortable ? /*#__PURE__*/React.createElement("button", {
|
|
23
|
+
type: "button",
|
|
24
|
+
"aria-roledescription": "Sort button"
|
|
25
|
+
}, content) : /*#__PURE__*/React.createElement("span", null, content));
|
|
22
26
|
};
|
|
23
27
|
|
|
24
28
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
@@ -1,15 +1,10 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
2
|
import React from 'react';
|
|
4
3
|
import { validateSortKey } from '../internal/helpers';
|
|
5
4
|
import { Head } from '../styled/table-head';
|
|
6
5
|
import RankableHeadCell from './rankable/table-head-cell';
|
|
7
6
|
import HeadCell from './table-head-cell';
|
|
8
7
|
class TableHead extends React.Component {
|
|
9
|
-
constructor(...args) {
|
|
10
|
-
super(...args);
|
|
11
|
-
_defineProperty(this, "canSortOnEnterPressed", (e, isSortable) => isSortable && e.key === 'Enter');
|
|
12
|
-
}
|
|
13
8
|
UNSAFE_componentWillMount() {
|
|
14
9
|
validateSortKey(this.props.sortKey, this.props.head);
|
|
15
10
|
}
|
|
@@ -66,7 +61,6 @@ class TableHead extends React.Component {
|
|
|
66
61
|
isRanking: isRanking,
|
|
67
62
|
key: key || index,
|
|
68
63
|
onClick: isSortable ? onSort(cell) : undefined,
|
|
69
|
-
onKeyDown: e => this.canSortOnEnterPressed(e, isSortable) ? onSort(cell)() : undefined,
|
|
70
64
|
testId: cellTestId || testId,
|
|
71
65
|
shouldTruncate: shouldTruncate,
|
|
72
66
|
sortOrder: key === sortKey ? sortOrder : undefined,
|
|
@@ -49,8 +49,16 @@ const onClickStyles = css({
|
|
|
49
49
|
}
|
|
50
50
|
});
|
|
51
51
|
const baseStyles = css({
|
|
52
|
-
'& >
|
|
52
|
+
'& > button': {
|
|
53
|
+
padding: "var(--ds-space-0, 0)",
|
|
53
54
|
position: 'relative',
|
|
55
|
+
appearance: 'none',
|
|
56
|
+
background: 'none',
|
|
57
|
+
border: 'none',
|
|
58
|
+
color: 'inherit',
|
|
59
|
+
cursor: 'inherit',
|
|
60
|
+
fontSize: 'inherit',
|
|
61
|
+
fontWeight: 'inherit',
|
|
54
62
|
'&::before, &::after': {
|
|
55
63
|
display: 'block',
|
|
56
64
|
width: 0,
|
|
@@ -73,7 +81,7 @@ const baseStyles = css({
|
|
|
73
81
|
}
|
|
74
82
|
},
|
|
75
83
|
'@media (forced-colors: active)': {
|
|
76
|
-
'& >
|
|
84
|
+
'& > button': {
|
|
77
85
|
'&::before, &::after': {
|
|
78
86
|
border: `3px solid ${MSThemeColors.Background}`
|
|
79
87
|
},
|
|
@@ -87,13 +95,13 @@ const baseStyles = css({
|
|
|
87
95
|
}
|
|
88
96
|
});
|
|
89
97
|
const ascendingStyles = css({
|
|
90
|
-
'& >
|
|
98
|
+
'& > button': {
|
|
91
99
|
'&::before': {
|
|
92
100
|
borderBottom: `3px solid ${arrow.selectedColor}`
|
|
93
101
|
}
|
|
94
102
|
},
|
|
95
103
|
'@media (forced-colors: active)': {
|
|
96
|
-
'& >
|
|
104
|
+
'& > button': {
|
|
97
105
|
'&::before': {
|
|
98
106
|
borderBottom: `3px solid ${MSThemeColors.SelectedBackground}`
|
|
99
107
|
}
|
|
@@ -101,13 +109,13 @@ const ascendingStyles = css({
|
|
|
101
109
|
}
|
|
102
110
|
});
|
|
103
111
|
const descendingStyles = css({
|
|
104
|
-
'& >
|
|
112
|
+
'& > button': {
|
|
105
113
|
'&::after': {
|
|
106
114
|
borderTop: `3px solid ${arrow.selectedColor}`
|
|
107
115
|
}
|
|
108
116
|
},
|
|
109
117
|
'@media (forced-colors: active)': {
|
|
110
|
-
'& >
|
|
118
|
+
'& > button': {
|
|
111
119
|
'&::after': {
|
|
112
120
|
borderTop: `3px solid ${MSThemeColors.SelectedBackground}`
|
|
113
121
|
}
|
package/dist/es2019/version.json
CHANGED
|
@@ -69,6 +69,7 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
|
|
|
69
69
|
_defineProperty(_assertThisInitialized(_this), "getThisNode", function () {
|
|
70
70
|
return safeFindDOMNode(_assertThisInitialized(_this));
|
|
71
71
|
});
|
|
72
|
+
// @ts-ignore - this.spinnerRef is not assignable to type 'ReactInstance'
|
|
72
73
|
_defineProperty(_assertThisInitialized(_this), "getSpinnerNode", function () {
|
|
73
74
|
return safeFindDOMNode(_this.spinnerRef);
|
|
74
75
|
});
|
|
@@ -109,7 +110,7 @@ var LoadingContainerAdvanced = /*#__PURE__*/function (_React$Component) {
|
|
|
109
110
|
}
|
|
110
111
|
});
|
|
111
112
|
return _this;
|
|
112
|
-
}
|
|
113
|
+
}
|
|
113
114
|
_createClass(LoadingContainerAdvanced, [{
|
|
114
115
|
key: "attachListeners",
|
|
115
116
|
value: function attachListeners() {
|
|
@@ -22,7 +22,7 @@ import ManagedPagination from './managed-pagination';
|
|
|
22
22
|
import RankableTableBody from './rankable/body';
|
|
23
23
|
import TableHead from './table-head';
|
|
24
24
|
var packageName = "@atlaskit/dynamic-table";
|
|
25
|
-
var packageVersion = "14.
|
|
25
|
+
var packageVersion = "14.9.0";
|
|
26
26
|
function toggleSortOrder(currentSortOrder) {
|
|
27
27
|
switch (currentSortOrder) {
|
|
28
28
|
case DESC:
|
|
@@ -220,7 +220,7 @@ var DynamicTable = /*#__PURE__*/function (_React$Component) {
|
|
|
220
220
|
sortKey: sortKey,
|
|
221
221
|
sortOrder: sortOrder,
|
|
222
222
|
isRanking: this.state.isRanking,
|
|
223
|
-
isRankable:
|
|
223
|
+
isRankable: isRankable,
|
|
224
224
|
testId: testId
|
|
225
225
|
}), rowsExist && (canRank ? /*#__PURE__*/React.createElement(RankableTableBody, _extends({}, bodyProps, {
|
|
226
226
|
isRanking: this.state.isRanking,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
-
var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable"];
|
|
3
|
+
var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "onClick"];
|
|
4
4
|
import React from 'react';
|
|
5
5
|
import { HeadCell } from '../styled/table-head';
|
|
6
6
|
var TableHeadCell = function TableHeadCell(_ref) {
|
|
@@ -10,6 +10,7 @@ var TableHeadCell = function TableHeadCell(_ref) {
|
|
|
10
10
|
isRanking = _ref.isRanking,
|
|
11
11
|
innerRef = _ref.innerRef,
|
|
12
12
|
isSortable = _ref.isSortable,
|
|
13
|
+
onClick = _ref.onClick,
|
|
13
14
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
14
15
|
return /*#__PURE__*/React.createElement(HeadCell, _extends({
|
|
15
16
|
style: inlineStyles,
|
|
@@ -17,9 +18,12 @@ var TableHeadCell = function TableHeadCell(_ref) {
|
|
|
17
18
|
ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
|
|
18
19
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
19
20
|
}, rest, {
|
|
20
|
-
|
|
21
|
+
onClick: onClick,
|
|
21
22
|
isSortable: isSortable
|
|
22
|
-
}), /*#__PURE__*/React.createElement("
|
|
23
|
+
}), isSortable ? /*#__PURE__*/React.createElement("button", {
|
|
24
|
+
type: "button",
|
|
25
|
+
"aria-roledescription": "Sort button"
|
|
26
|
+
}, content) : /*#__PURE__*/React.createElement("span", null, content));
|
|
23
27
|
};
|
|
24
28
|
|
|
25
29
|
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
@@ -2,11 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
3
|
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
4
|
import _createClass from "@babel/runtime/helpers/createClass";
|
|
5
|
-
import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
|
|
6
5
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
7
6
|
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
8
7
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
9
|
-
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
10
8
|
var _excluded = ["cells"],
|
|
11
9
|
_excluded2 = ["colSpan", "content", "isSortable", "key", "shouldTruncate", "testId", "width"];
|
|
12
10
|
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); }; }
|
|
@@ -20,16 +18,8 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
20
18
|
_inherits(TableHead, _React$Component);
|
|
21
19
|
var _super = _createSuper(TableHead);
|
|
22
20
|
function TableHead() {
|
|
23
|
-
var _this;
|
|
24
21
|
_classCallCheck(this, TableHead);
|
|
25
|
-
|
|
26
|
-
args[_key] = arguments[_key];
|
|
27
|
-
}
|
|
28
|
-
_this = _super.call.apply(_super, [this].concat(args));
|
|
29
|
-
_defineProperty(_assertThisInitialized(_this), "canSortOnEnterPressed", function (e, isSortable) {
|
|
30
|
-
return isSortable && e.key === 'Enter';
|
|
31
|
-
});
|
|
32
|
-
return _this;
|
|
22
|
+
return _super.apply(this, arguments);
|
|
33
23
|
}
|
|
34
24
|
_createClass(TableHead, [{
|
|
35
25
|
key: "UNSAFE_componentWillMount",
|
|
@@ -46,7 +36,6 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
46
36
|
}, {
|
|
47
37
|
key: "render",
|
|
48
38
|
value: function render() {
|
|
49
|
-
var _this2 = this;
|
|
50
39
|
var _this$props = this.props,
|
|
51
40
|
head = _this$props.head,
|
|
52
41
|
sortKey = _this$props.sortKey,
|
|
@@ -87,9 +76,6 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
87
76
|
isRanking: isRanking,
|
|
88
77
|
key: key || index,
|
|
89
78
|
onClick: isSortable ? onSort(cell) : undefined,
|
|
90
|
-
onKeyDown: function onKeyDown(e) {
|
|
91
|
-
return _this2.canSortOnEnterPressed(e, isSortable) ? onSort(cell)() : undefined;
|
|
92
|
-
},
|
|
93
79
|
testId: cellTestId || testId,
|
|
94
80
|
shouldTruncate: shouldTruncate,
|
|
95
81
|
sortOrder: key === sortKey ? sortOrder : undefined,
|
|
@@ -54,8 +54,16 @@ var onClickStyles = css({
|
|
|
54
54
|
}
|
|
55
55
|
});
|
|
56
56
|
var baseStyles = css({
|
|
57
|
-
'& >
|
|
57
|
+
'& > button': {
|
|
58
|
+
padding: "var(--ds-space-0, 0)",
|
|
58
59
|
position: 'relative',
|
|
60
|
+
appearance: 'none',
|
|
61
|
+
background: 'none',
|
|
62
|
+
border: 'none',
|
|
63
|
+
color: 'inherit',
|
|
64
|
+
cursor: 'inherit',
|
|
65
|
+
fontSize: 'inherit',
|
|
66
|
+
fontWeight: 'inherit',
|
|
59
67
|
'&::before, &::after': {
|
|
60
68
|
display: 'block',
|
|
61
69
|
width: 0,
|
|
@@ -78,7 +86,7 @@ var baseStyles = css({
|
|
|
78
86
|
}
|
|
79
87
|
},
|
|
80
88
|
'@media (forced-colors: active)': {
|
|
81
|
-
'& >
|
|
89
|
+
'& > button': {
|
|
82
90
|
'&::before, &::after': {
|
|
83
91
|
border: "3px solid ".concat(MSThemeColors.Background)
|
|
84
92
|
},
|
|
@@ -92,13 +100,13 @@ var baseStyles = css({
|
|
|
92
100
|
}
|
|
93
101
|
});
|
|
94
102
|
var ascendingStyles = css({
|
|
95
|
-
'& >
|
|
103
|
+
'& > button': {
|
|
96
104
|
'&::before': {
|
|
97
105
|
borderBottom: "3px solid ".concat(arrow.selectedColor)
|
|
98
106
|
}
|
|
99
107
|
},
|
|
100
108
|
'@media (forced-colors: active)': {
|
|
101
|
-
'& >
|
|
109
|
+
'& > button': {
|
|
102
110
|
'&::before': {
|
|
103
111
|
borderBottom: "3px solid ".concat(MSThemeColors.SelectedBackground)
|
|
104
112
|
}
|
|
@@ -106,13 +114,13 @@ var ascendingStyles = css({
|
|
|
106
114
|
}
|
|
107
115
|
});
|
|
108
116
|
var descendingStyles = css({
|
|
109
|
-
'& >
|
|
117
|
+
'& > button': {
|
|
110
118
|
'&::after': {
|
|
111
119
|
borderTop: "3px solid ".concat(arrow.selectedColor)
|
|
112
120
|
}
|
|
113
121
|
},
|
|
114
122
|
'@media (forced-colors: active)': {
|
|
115
|
-
'& >
|
|
123
|
+
'& > button': {
|
|
116
124
|
'&::after': {
|
|
117
125
|
borderTop: "3px solid ".concat(MSThemeColors.SelectedBackground)
|
|
118
126
|
}
|
package/dist/esm/version.json
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { FC,
|
|
1
|
+
import React, { FC, LegacyRef } from 'react';
|
|
2
2
|
import { SortOrderType } from '../types';
|
|
3
3
|
export interface TableHeadCellProps {
|
|
4
4
|
colSpan?: number;
|
|
@@ -10,7 +10,6 @@ export interface TableHeadCellProps {
|
|
|
10
10
|
inlineStyles?: {};
|
|
11
11
|
content?: React.ReactNode;
|
|
12
12
|
onClick?: () => void;
|
|
13
|
-
onKeyDown?: (e: KeyboardEvent) => void;
|
|
14
13
|
shouldTruncate?: boolean;
|
|
15
14
|
testId?: string;
|
|
16
15
|
width?: number;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { HeadType, RowCellType, SortOrderType } from '../types';
|
|
3
3
|
interface TableHeadProps {
|
|
4
4
|
head: HeadType;
|
|
@@ -13,7 +13,6 @@ interface TableHeadProps {
|
|
|
13
13
|
declare class TableHead extends React.Component<TableHeadProps, {}> {
|
|
14
14
|
UNSAFE_componentWillMount(): void;
|
|
15
15
|
UNSAFE_componentWillReceiveProps(nextProps: TableHeadProps): void;
|
|
16
|
-
canSortOnEnterPressed: (e: KeyboardEvent, isSortable: Boolean | void) => boolean | void;
|
|
17
16
|
render(): JSX.Element | null;
|
|
18
17
|
}
|
|
19
18
|
export default TableHead;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/dynamic-table",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.9.0",
|
|
4
4
|
"description": "A dynamic table displays rows of data with built-in pagination, sorting, and re-ordering functionality.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -25,12 +25,12 @@
|
|
|
25
25
|
}
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@atlaskit/analytics-next": "^9.
|
|
29
|
-
"@atlaskit/ds-lib": "^2.
|
|
30
|
-
"@atlaskit/pagination": "^14.
|
|
31
|
-
"@atlaskit/spinner": "^15.
|
|
32
|
-
"@atlaskit/theme": "^12.
|
|
33
|
-
"@atlaskit/tokens": "^1.
|
|
28
|
+
"@atlaskit/analytics-next": "^9.1.0",
|
|
29
|
+
"@atlaskit/ds-lib": "^2.2.0",
|
|
30
|
+
"@atlaskit/pagination": "^14.3.0",
|
|
31
|
+
"@atlaskit/spinner": "^15.5.0",
|
|
32
|
+
"@atlaskit/theme": "^12.5.0",
|
|
33
|
+
"@atlaskit/tokens": "^1.3.0",
|
|
34
34
|
"@babel/runtime": "^7.0.0",
|
|
35
35
|
"@emotion/react": "^11.7.1",
|
|
36
36
|
"react-beautiful-dnd": "^12.1.1"
|
|
@@ -40,12 +40,12 @@
|
|
|
40
40
|
"react-dom": "^16.8.0"
|
|
41
41
|
},
|
|
42
42
|
"devDependencies": {
|
|
43
|
-
"@atlaskit/avatar": "^21.
|
|
44
|
-
"@atlaskit/button": "^16.
|
|
43
|
+
"@atlaskit/avatar": "^21.3.0",
|
|
44
|
+
"@atlaskit/button": "^16.7.0",
|
|
45
45
|
"@atlaskit/docs": "*",
|
|
46
|
-
"@atlaskit/dropdown-menu": "^11.
|
|
46
|
+
"@atlaskit/dropdown-menu": "^11.8.0",
|
|
47
47
|
"@atlaskit/ssr": "*",
|
|
48
|
-
"@atlaskit/toggle": "^12.
|
|
48
|
+
"@atlaskit/toggle": "^12.6.0",
|
|
49
49
|
"@atlaskit/visual-regression": "*",
|
|
50
50
|
"@atlaskit/webdriver-runner": "*",
|
|
51
51
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|