@atlaskit/dynamic-table 17.0.2 → 17.0.3
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/components/rankable/table-head-cell-old.js +46 -0
- package/dist/cjs/components/stateless.js +2 -2
- package/dist/cjs/components/table-head-cell-old.js +39 -0
- package/dist/cjs/components/table-head-cell.compiled.css +3 -1
- package/dist/cjs/components/table-head-cell.js +48 -39
- package/dist/cjs/components/table-head.js +20 -7
- package/dist/es2019/components/rankable/table-head-cell-old.js +24 -0
- package/dist/es2019/components/stateless.js +2 -2
- package/dist/es2019/components/table-head-cell-old.js +32 -0
- package/dist/es2019/components/table-head-cell.compiled.css +3 -1
- package/dist/es2019/components/table-head-cell.js +41 -35
- package/dist/es2019/components/table-head.js +19 -6
- package/dist/esm/components/rankable/table-head-cell-old.js +40 -0
- package/dist/esm/components/stateless.js +2 -2
- package/dist/esm/components/table-head-cell-old.js +33 -0
- package/dist/esm/components/table-head-cell.compiled.css +3 -1
- package/dist/esm/components/table-head-cell.js +48 -39
- package/dist/esm/components/table-head.js +20 -7
- package/dist/types/components/rankable/table-head-cell-old.d.ts +5 -0
- package/dist/types/components/table-head-cell-old.d.ts +19 -0
- package/dist/types/components/table-head-cell.d.ts +1 -0
- package/dist/types/types.d.ts +7 -0
- package/dist/types-ts4.5/components/rankable/table-head-cell-old.d.ts +5 -0
- package/dist/types-ts4.5/components/table-head-cell-old.d.ts +19 -0
- package/dist/types-ts4.5/components/table-head-cell.d.ts +1 -0
- package/dist/types-ts4.5/types.d.ts +7 -0
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/dynamic-table
|
|
2
2
|
|
|
3
|
+
## 17.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#100858](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100858)
|
|
8
|
+
[`bc47a0d12cb7a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bc47a0d12cb7a) -
|
|
9
|
+
[ux] Updates visually refreshed sort button in DynamicTableStateless for an icon only column
|
|
10
|
+
header
|
|
11
|
+
|
|
3
12
|
## 17.0.2
|
|
4
13
|
|
|
5
14
|
### Patch Changes
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
11
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
12
|
+
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
|
|
13
|
+
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
|
|
14
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
15
|
+
var _react = _interopRequireDefault(require("react"));
|
|
16
|
+
var _withDimensions = _interopRequireDefault(require("../../hoc/with-dimensions"));
|
|
17
|
+
var _helpers = require("../../internal/helpers");
|
|
18
|
+
var _tableHeadCellOld = _interopRequireDefault(require("../table-head-cell-old"));
|
|
19
|
+
var _excluded = ["isRanking", "refHeight", "refWidth"];
|
|
20
|
+
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
21
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } // Delete this file when cleaning up platform-component-visual-refresh FG
|
|
22
|
+
var RankableTableHeadCellComponentOld = /*#__PURE__*/function (_React$Component) {
|
|
23
|
+
function RankableTableHeadCellComponentOld() {
|
|
24
|
+
(0, _classCallCheck2.default)(this, RankableTableHeadCellComponentOld);
|
|
25
|
+
return _callSuper(this, RankableTableHeadCellComponentOld, arguments);
|
|
26
|
+
}
|
|
27
|
+
(0, _inherits2.default)(RankableTableHeadCellComponentOld, _React$Component);
|
|
28
|
+
return (0, _createClass2.default)(RankableTableHeadCellComponentOld, [{
|
|
29
|
+
key: "render",
|
|
30
|
+
value: function render() {
|
|
31
|
+
var _this$props = this.props,
|
|
32
|
+
isRanking = _this$props.isRanking,
|
|
33
|
+
refHeight = _this$props.refHeight,
|
|
34
|
+
refWidth = _this$props.refWidth,
|
|
35
|
+
restProps = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
|
|
36
|
+
var inlineStyles = (0, _helpers.inlineStylesIfRanking)(isRanking, refWidth);
|
|
37
|
+
return /*#__PURE__*/_react.default.createElement(_tableHeadCellOld.default, (0, _extends2.default)({
|
|
38
|
+
inlineStyles: inlineStyles
|
|
39
|
+
}, restProps));
|
|
40
|
+
}
|
|
41
|
+
}]);
|
|
42
|
+
}(_react.default.Component);
|
|
43
|
+
var RankableTableHeadCellOld = (0, _withDimensions.default)(RankableTableHeadCellComponentOld);
|
|
44
|
+
|
|
45
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
46
|
+
var _default = exports.default = RankableTableHeadCellOld;
|
|
@@ -86,14 +86,14 @@ var DynamicTable = function DynamicTable(_ref) {
|
|
|
86
86
|
action: 'sorted',
|
|
87
87
|
componentName: 'dynamicTable',
|
|
88
88
|
packageName: "@atlaskit/dynamic-table",
|
|
89
|
-
packageVersion: "17.0.
|
|
89
|
+
packageVersion: "17.0.3"
|
|
90
90
|
});
|
|
91
91
|
var onRankEnd = (0, _analyticsNext.usePlatformLeafEventHandler)({
|
|
92
92
|
fn: providedOnRankEnd,
|
|
93
93
|
action: 'ranked',
|
|
94
94
|
componentName: 'dynamicTable',
|
|
95
95
|
packageName: "@atlaskit/dynamic-table",
|
|
96
|
-
packageVersion: "17.0.
|
|
96
|
+
packageVersion: "17.0.3"
|
|
97
97
|
});
|
|
98
98
|
(0, _react.useEffect)(function () {
|
|
99
99
|
(0, _helpers.validateSortKey)(sortKey, head);
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
+
var _react = _interopRequireDefault(require("react"));
|
|
11
|
+
var _tableHead = require("../styled/table-head");
|
|
12
|
+
var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "onClick"]; // Delete this file when cleaning up platform-component-visual-refresh FG
|
|
13
|
+
var TableHeadCellOld = function TableHeadCellOld(_ref) {
|
|
14
|
+
var content = _ref.content,
|
|
15
|
+
inlineStyles = _ref.inlineStyles,
|
|
16
|
+
testId = _ref.testId,
|
|
17
|
+
isRanking = _ref.isRanking,
|
|
18
|
+
innerRef = _ref.innerRef,
|
|
19
|
+
isSortable = _ref.isSortable,
|
|
20
|
+
onClick = _ref.onClick,
|
|
21
|
+
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
22
|
+
return /*#__PURE__*/_react.default.createElement(_tableHead.HeadCell
|
|
23
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
24
|
+
, (0, _extends2.default)({
|
|
25
|
+
style: inlineStyles,
|
|
26
|
+
testId: testId && "".concat(testId, "--head--cell"),
|
|
27
|
+
ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
|
|
28
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
29
|
+
}, rest, {
|
|
30
|
+
onClick: onClick,
|
|
31
|
+
isSortable: isSortable
|
|
32
|
+
}), isSortable ? /*#__PURE__*/_react.default.createElement("button", {
|
|
33
|
+
type: "button",
|
|
34
|
+
"aria-roledescription": "Sort button"
|
|
35
|
+
}, content) : content);
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
39
|
+
var _default = exports.default = TableHeadCellOld;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
|
|
2
|
-
._1yt41b66{padding:var(--ds-space-050,4px)}
|
|
2
|
+
._1yt41b66{padding:var(--ds-space-050,4px)}
|
|
3
|
+
._1yt4ze3t{padding:var(--ds-space-0,0)}._18u010v4{margin-left:var(--ds-space-negative-300,-24px)}
|
|
3
4
|
._1e0c1txw{display:flex}
|
|
4
5
|
._4cvr1h6o{align-items:center}
|
|
5
6
|
._bfhk18uv{background-color:initial}
|
|
6
7
|
._tzy4idpf{opacity:0}
|
|
7
8
|
._tzy4kb7n{opacity:1}
|
|
9
|
+
._u5f31b66{padding-right:var(--ds-space-050,4px)}
|
|
8
10
|
._1h7hkb7n:focus{opacity:1}
|
|
9
11
|
._d0altlke:hover{cursor:pointer}
|
|
@@ -15,18 +15,19 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
|
|
|
15
15
|
var _react = _interopRequireWildcard(require("react"));
|
|
16
16
|
var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/arrow-down"));
|
|
17
17
|
var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/arrow-up"));
|
|
18
|
-
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
19
18
|
var _compiled = require("@atlaskit/primitives/compiled");
|
|
20
19
|
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
|
|
21
20
|
var _constants = require("../internal/constants");
|
|
22
21
|
var _tableHead = require("../styled/table-head");
|
|
23
|
-
var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId", "ascendingSortTooltip", "descendingSortTooltip", "buttonAriaRoleDescription"];
|
|
22
|
+
var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId", "ascendingSortTooltip", "descendingSortTooltip", "buttonAriaRoleDescription", "isIconOnlyHeader"];
|
|
24
23
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
25
24
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
26
25
|
var styles = {
|
|
27
|
-
buttonWrapper: "
|
|
28
|
-
|
|
29
|
-
|
|
26
|
+
buttonWrapper: "_1yt4ze3t _1e0c1txw _bfhk18uv _4cvr1h6o _d0altlke",
|
|
27
|
+
sortIconHiddenWrapper: "_1yt41b66 _1e0c1txw _tzy4idpf _bfhk18uv _1h7hkb7n",
|
|
28
|
+
sortIconVisibleWrapper: "_1yt41b66 _1e0c1txw _tzy4kb7n _bfhk18uv",
|
|
29
|
+
hideIconHeaderWrapper: "_tzy4idpf _18u010v4",
|
|
30
|
+
visibleHeaderWrapper: "_tzy4kb7n _u5f31b66"
|
|
30
31
|
};
|
|
31
32
|
var headCellStyles = {
|
|
32
33
|
headCellContainer: "_1e0c1txw _4cvr1h6o"
|
|
@@ -48,53 +49,62 @@ var TableHeadCell = function TableHeadCell(_ref) {
|
|
|
48
49
|
descendingSortTooltip = _ref$descendingSortTo === void 0 ? 'Sort descending' : _ref$descendingSortTo,
|
|
49
50
|
_ref$buttonAriaRoleDe = _ref.buttonAriaRoleDescription,
|
|
50
51
|
buttonAriaRoleDescription = _ref$buttonAriaRoleDe === void 0 ? 'Sort button' : _ref$buttonAriaRoleDe,
|
|
52
|
+
isIconOnlyHeader = _ref.isIconOnlyHeader,
|
|
51
53
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
|
52
|
-
var
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
54
|
+
var _useState = (0, _react.useState)(false),
|
|
55
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
56
|
+
isHovered = _useState2[0],
|
|
57
|
+
setIsHovered = _useState2[1];
|
|
58
|
+
var _useState3 = (0, _react.useState)(false),
|
|
59
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
60
|
+
isFocused = _useState4[0],
|
|
61
|
+
setIsFocused = _useState4[1];
|
|
62
|
+
var isActive = headCellId === activeSortButtonId || sortOrder !== undefined;
|
|
63
|
+
var isSortIconVisible = isHovered || isActive || isFocused;
|
|
64
|
+
var isVisibleIconOnlyHeader = isSortIconVisible && isIconOnlyHeader;
|
|
65
|
+
var shouldRenderSortIcon = !isIconOnlyHeader || isSortIconVisible || isIconOnlyHeader && !isFocused;
|
|
66
|
+
var handleFocus = (0, _react.useCallback)(function () {
|
|
67
|
+
setIsFocused === null || setIsFocused === void 0 || setIsFocused(true);
|
|
68
|
+
}, [setIsFocused]);
|
|
69
|
+
var handleBlur = (0, _react.useCallback)(function () {
|
|
70
|
+
setIsFocused === null || setIsFocused === void 0 || setIsFocused(false);
|
|
71
|
+
}, [setIsFocused]);
|
|
59
72
|
var handleMouseEnter = (0, _react.useCallback)(function () {
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
setIsHovered(true);
|
|
63
|
-
}
|
|
64
|
-
}, [isHovered, setIsHovered]);
|
|
73
|
+
setIsHovered(true);
|
|
74
|
+
}, [setIsHovered]);
|
|
65
75
|
var handleMouseLeave = (0, _react.useCallback)(function () {
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
}
|
|
70
|
-
}, [isHovered, setIsHovered]);
|
|
71
|
-
var visuallyRefreshedButton = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
76
|
+
setIsHovered(false);
|
|
77
|
+
}, [setIsHovered]);
|
|
78
|
+
var visuallyRefreshedButton = /*#__PURE__*/_react.default.createElement(_compiled.Box, {
|
|
72
79
|
xcss: headCellStyles.headCellContainer,
|
|
73
80
|
onMouseEnter: handleMouseEnter,
|
|
74
|
-
onMouseLeave: handleMouseLeave
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
color: "color.text.subtle",
|
|
78
|
-
weight: "bold",
|
|
79
|
-
maxLines: 1
|
|
80
|
-
}, content), /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
|
|
81
|
-
xcss: styles.buttonWrapper
|
|
81
|
+
onMouseLeave: handleMouseLeave,
|
|
82
|
+
onFocus: handleFocus,
|
|
83
|
+
onBlur: handleBlur
|
|
82
84
|
}, /*#__PURE__*/_react.default.createElement(_tooltip.default, {
|
|
83
85
|
content: sortOrder === _constants.ASC ? ascendingSortTooltip : descendingSortTooltip
|
|
84
86
|
}, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
|
|
85
87
|
onClick: onClick,
|
|
86
|
-
xcss:
|
|
88
|
+
xcss: styles.buttonWrapper,
|
|
87
89
|
"aria-roledescription": buttonAriaRoleDescription
|
|
90
|
+
}, /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
|
|
91
|
+
xcss: isVisibleIconOnlyHeader ? styles.hideIconHeaderWrapper : styles.visibleHeaderWrapper
|
|
92
|
+
}, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
|
|
93
|
+
size: "small",
|
|
94
|
+
color: "color.text.subtle",
|
|
95
|
+
weight: "bold",
|
|
96
|
+
maxLines: 1
|
|
97
|
+
}, content)), shouldRenderSortIcon && /*#__PURE__*/_react.default.createElement(_compiled.Flex, {
|
|
98
|
+
xcss: isSortIconVisible ? styles.sortIconVisibleWrapper : styles.sortIconHiddenWrapper
|
|
88
99
|
}, sortOrder === _constants.ASC ? /*#__PURE__*/_react.default.createElement(_arrowUp.default, {
|
|
89
100
|
label: "",
|
|
90
|
-
color: "var(--ds-text-subtle, #44546F)"
|
|
101
|
+
color: "var(--ds-text-subtle, #44546F)",
|
|
102
|
+
testId: testId && "".concat(testId, "--up--icon")
|
|
91
103
|
}) : /*#__PURE__*/_react.default.createElement(_arrowDown.default, {
|
|
92
104
|
label: "",
|
|
93
|
-
color: "var(--ds-text-subtle, #44546F)"
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
"aria-roledescription": "Sort button"
|
|
97
|
-
}, content);
|
|
105
|
+
color: "var(--ds-text-subtle, #44546F)",
|
|
106
|
+
testId: testId && "".concat(testId, "--down--icon")
|
|
107
|
+
})))));
|
|
98
108
|
return /*#__PURE__*/_react.default.createElement(_tableHead.HeadCell
|
|
99
109
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
100
110
|
, (0, _extends2.default)({
|
|
@@ -103,7 +113,6 @@ var TableHeadCell = function TableHeadCell(_ref) {
|
|
|
103
113
|
ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
|
|
104
114
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
105
115
|
}, rest, {
|
|
106
|
-
onClick: (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? undefined : onClick,
|
|
107
116
|
isSortable: isSortable,
|
|
108
117
|
sortOrder: sortOrder
|
|
109
118
|
}), isSortable ? visuallyRefreshedButton : content);
|
|
@@ -17,9 +17,11 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
|
|
|
17
17
|
var _helpers = require("../internal/helpers");
|
|
18
18
|
var _tableHead = require("../styled/table-head");
|
|
19
19
|
var _tableHeadCell = _interopRequireDefault(require("./rankable/table-head-cell"));
|
|
20
|
+
var _tableHeadCellOld = _interopRequireDefault(require("./rankable/table-head-cell-old"));
|
|
20
21
|
var _tableHeadCell2 = _interopRequireDefault(require("./table-head-cell"));
|
|
22
|
+
var _tableHeadCellOld2 = _interopRequireDefault(require("./table-head-cell-old"));
|
|
21
23
|
var _excluded = ["cells"],
|
|
22
|
-
_excluded2 = ["ascendingSortTooltip", "buttonAriaRoleDescription", "colSpan", "content", "descendingSortTooltip", "isSortable", "key", "shouldTruncate", "testId", "width"];
|
|
24
|
+
_excluded2 = ["ascendingSortTooltip", "buttonAriaRoleDescription", "colSpan", "content", "descendingSortTooltip", "isIconOnlyHeader", "isSortable", "key", "shouldTruncate", "testId", "width"];
|
|
23
25
|
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
|
|
24
26
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
25
27
|
var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
@@ -62,6 +64,7 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
62
64
|
if (!head) {
|
|
63
65
|
return null;
|
|
64
66
|
}
|
|
67
|
+
var HeadCellComponentOld = isRankable ? _tableHeadCellOld.default : _tableHeadCellOld2.default;
|
|
65
68
|
var HeadCellComponent = isRankable ? _tableHeadCell.default : _tableHeadCell2.default;
|
|
66
69
|
|
|
67
70
|
// TODO: Remove `rest` props and use only what is explicitly in the API.
|
|
@@ -79,6 +82,7 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
79
82
|
colSpan = cell.colSpan,
|
|
80
83
|
content = cell.content,
|
|
81
84
|
descendingSortTooltip = cell.descendingSortTooltip,
|
|
85
|
+
isIconOnlyHeader = cell.isIconOnlyHeader,
|
|
82
86
|
isSortable = cell.isSortable,
|
|
83
87
|
key = cell.key,
|
|
84
88
|
shouldTruncate = cell.shouldTruncate,
|
|
@@ -86,22 +90,19 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
86
90
|
width = cell.width,
|
|
87
91
|
restCellProps = (0, _objectWithoutProperties2.default)(cell, _excluded2);
|
|
88
92
|
var headCellId = "head-cell-".concat(index);
|
|
89
|
-
var handleClick =
|
|
93
|
+
var handleClick = function handleClick() {
|
|
90
94
|
_this2.setState({
|
|
91
95
|
activeSortButtonId: headCellId
|
|
92
96
|
});
|
|
93
97
|
if (isSortable) {
|
|
94
98
|
onSort(cell)();
|
|
95
99
|
}
|
|
96
|
-
} : function () {
|
|
97
|
-
if (isSortable) {
|
|
98
|
-
onSort(cell)();
|
|
99
|
-
}
|
|
100
100
|
};
|
|
101
|
-
return /*#__PURE__*/_react.default.createElement(HeadCellComponent, (0, _extends2.default)({
|
|
101
|
+
return (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? /*#__PURE__*/_react.default.createElement(HeadCellComponent, (0, _extends2.default)({
|
|
102
102
|
colSpan: colSpan,
|
|
103
103
|
content: content,
|
|
104
104
|
isFixedSize: isFixedSize,
|
|
105
|
+
isIconOnlyHeader: isIconOnlyHeader,
|
|
105
106
|
isSortable: !!isSortable,
|
|
106
107
|
isRanking: isRanking,
|
|
107
108
|
key: key || index,
|
|
@@ -115,6 +116,18 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
115
116
|
ascendingSortTooltip: ascendingSortTooltip,
|
|
116
117
|
descendingSortTooltip: descendingSortTooltip,
|
|
117
118
|
buttonAriaRoleDescription: buttonAriaRoleDescription
|
|
119
|
+
}, restCellProps)) : /*#__PURE__*/_react.default.createElement(HeadCellComponentOld, (0, _extends2.default)({
|
|
120
|
+
colSpan: colSpan,
|
|
121
|
+
content: content,
|
|
122
|
+
isFixedSize: isFixedSize,
|
|
123
|
+
isSortable: !!isSortable,
|
|
124
|
+
isRanking: isRanking,
|
|
125
|
+
key: key || index,
|
|
126
|
+
onClick: isSortable ? onSort(cell) : undefined,
|
|
127
|
+
testId: cellTestId || testId,
|
|
128
|
+
shouldTruncate: shouldTruncate,
|
|
129
|
+
sortOrder: key === sortKey ? sortOrder : undefined,
|
|
130
|
+
width: width
|
|
118
131
|
}, restCellProps));
|
|
119
132
|
})));
|
|
120
133
|
}
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
// Delete this file when cleaning up platform-component-visual-refresh FG
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import withDimensions from '../../hoc/with-dimensions';
|
|
5
|
+
import { inlineStylesIfRanking } from '../../internal/helpers';
|
|
6
|
+
import HeadCell from '../table-head-cell-old';
|
|
7
|
+
class RankableTableHeadCellComponentOld extends React.Component {
|
|
8
|
+
render() {
|
|
9
|
+
const {
|
|
10
|
+
isRanking,
|
|
11
|
+
refHeight,
|
|
12
|
+
refWidth,
|
|
13
|
+
...restProps
|
|
14
|
+
} = this.props;
|
|
15
|
+
const inlineStyles = inlineStylesIfRanking(isRanking, refWidth);
|
|
16
|
+
return /*#__PURE__*/React.createElement(HeadCell, _extends({
|
|
17
|
+
inlineStyles: inlineStyles
|
|
18
|
+
}, restProps));
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
const RankableTableHeadCellOld = withDimensions(RankableTableHeadCellComponentOld);
|
|
22
|
+
|
|
23
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
24
|
+
export default RankableTableHeadCellOld;
|
|
@@ -60,14 +60,14 @@ const DynamicTable = ({
|
|
|
60
60
|
action: 'sorted',
|
|
61
61
|
componentName: 'dynamicTable',
|
|
62
62
|
packageName: "@atlaskit/dynamic-table",
|
|
63
|
-
packageVersion: "17.0.
|
|
63
|
+
packageVersion: "17.0.3"
|
|
64
64
|
});
|
|
65
65
|
const onRankEnd = usePlatformLeafEventHandler({
|
|
66
66
|
fn: providedOnRankEnd,
|
|
67
67
|
action: 'ranked',
|
|
68
68
|
componentName: 'dynamicTable',
|
|
69
69
|
packageName: "@atlaskit/dynamic-table",
|
|
70
|
-
packageVersion: "17.0.
|
|
70
|
+
packageVersion: "17.0.3"
|
|
71
71
|
});
|
|
72
72
|
useEffect(() => {
|
|
73
73
|
validateSortKey(sortKey, head);
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
// Delete this file when cleaning up platform-component-visual-refresh FG
|
|
3
|
+
import React from 'react';
|
|
4
|
+
import { HeadCell } from '../styled/table-head';
|
|
5
|
+
const TableHeadCellOld = ({
|
|
6
|
+
content,
|
|
7
|
+
inlineStyles,
|
|
8
|
+
testId,
|
|
9
|
+
isRanking,
|
|
10
|
+
innerRef,
|
|
11
|
+
isSortable,
|
|
12
|
+
onClick,
|
|
13
|
+
...rest
|
|
14
|
+
}) => {
|
|
15
|
+
return /*#__PURE__*/React.createElement(HeadCell
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
17
|
+
, _extends({
|
|
18
|
+
style: inlineStyles,
|
|
19
|
+
testId: testId && `${testId}--head--cell`,
|
|
20
|
+
ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
|
|
21
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
22
|
+
}, rest, {
|
|
23
|
+
onClick: onClick,
|
|
24
|
+
isSortable: isSortable
|
|
25
|
+
}), isSortable ? /*#__PURE__*/React.createElement("button", {
|
|
26
|
+
type: "button",
|
|
27
|
+
"aria-roledescription": "Sort button"
|
|
28
|
+
}, content) : content);
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
32
|
+
export default TableHeadCellOld;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
|
|
2
|
-
._1yt41b66{padding:var(--ds-space-050,4px)}
|
|
2
|
+
._1yt41b66{padding:var(--ds-space-050,4px)}
|
|
3
|
+
._1yt4ze3t{padding:var(--ds-space-0,0)}._18u010v4{margin-left:var(--ds-space-negative-300,-24px)}
|
|
3
4
|
._1e0c1txw{display:flex}
|
|
4
5
|
._4cvr1h6o{align-items:center}
|
|
5
6
|
._bfhk18uv{background-color:initial}
|
|
6
7
|
._tzy4idpf{opacity:0}
|
|
7
8
|
._tzy4kb7n{opacity:1}
|
|
9
|
+
._u5f31b66{padding-right:var(--ds-space-050,4px)}
|
|
8
10
|
._1h7hkb7n:focus{opacity:1}
|
|
9
11
|
._d0altlke:hover{cursor:pointer}
|
|
@@ -5,15 +5,16 @@ import { ax, ix } from "@compiled/react/runtime";
|
|
|
5
5
|
import React, { useCallback, useState } from 'react';
|
|
6
6
|
import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
|
|
7
7
|
import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
|
|
8
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
9
8
|
import { Box, Flex, Pressable, Text } from '@atlaskit/primitives/compiled';
|
|
10
9
|
import Tooltip from '@atlaskit/tooltip';
|
|
11
10
|
import { ASC } from '../internal/constants';
|
|
12
11
|
import { HeadCell } from '../styled/table-head';
|
|
13
12
|
const styles = {
|
|
14
|
-
buttonWrapper: "
|
|
15
|
-
|
|
16
|
-
|
|
13
|
+
buttonWrapper: "_1yt4ze3t _1e0c1txw _bfhk18uv _4cvr1h6o _d0altlke",
|
|
14
|
+
sortIconHiddenWrapper: "_1yt41b66 _1e0c1txw _tzy4idpf _bfhk18uv _1h7hkb7n",
|
|
15
|
+
sortIconVisibleWrapper: "_1yt41b66 _1e0c1txw _tzy4kb7n _bfhk18uv",
|
|
16
|
+
hideIconHeaderWrapper: "_tzy4idpf _18u010v4",
|
|
17
|
+
visibleHeaderWrapper: "_tzy4kb7n _u5f31b66"
|
|
17
18
|
};
|
|
18
19
|
const headCellStyles = {
|
|
19
20
|
headCellContainer: "_1e0c1txw _4cvr1h6o"
|
|
@@ -32,51 +33,57 @@ const TableHeadCell = ({
|
|
|
32
33
|
ascendingSortTooltip = 'Sort ascending',
|
|
33
34
|
descendingSortTooltip = 'Sort descending',
|
|
34
35
|
buttonAriaRoleDescription = 'Sort button',
|
|
36
|
+
isIconOnlyHeader,
|
|
35
37
|
...rest
|
|
36
38
|
}) => {
|
|
37
|
-
const [isHovered, setIsHovered] =
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
const
|
|
39
|
+
const [isHovered, setIsHovered] = useState(false);
|
|
40
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
41
|
+
const isActive = headCellId === activeSortButtonId || sortOrder !== undefined;
|
|
42
|
+
const isSortIconVisible = isHovered || isActive || isFocused;
|
|
43
|
+
const isVisibleIconOnlyHeader = isSortIconVisible && isIconOnlyHeader;
|
|
44
|
+
const shouldRenderSortIcon = !isIconOnlyHeader || isSortIconVisible || isIconOnlyHeader && !isFocused;
|
|
45
|
+
const handleFocus = useCallback(() => {
|
|
46
|
+
setIsFocused === null || setIsFocused === void 0 ? void 0 : setIsFocused(true);
|
|
47
|
+
}, [setIsFocused]);
|
|
48
|
+
const handleBlur = useCallback(() => {
|
|
49
|
+
setIsFocused === null || setIsFocused === void 0 ? void 0 : setIsFocused(false);
|
|
50
|
+
}, [setIsFocused]);
|
|
41
51
|
const handleMouseEnter = useCallback(() => {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
setIsHovered(true);
|
|
45
|
-
}
|
|
46
|
-
}, [isHovered, setIsHovered]);
|
|
52
|
+
setIsHovered(true);
|
|
53
|
+
}, [setIsHovered]);
|
|
47
54
|
const handleMouseLeave = useCallback(() => {
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
}
|
|
52
|
-
}, [isHovered, setIsHovered]);
|
|
53
|
-
const visuallyRefreshedButton = fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(Box, {
|
|
55
|
+
setIsHovered(false);
|
|
56
|
+
}, [setIsHovered]);
|
|
57
|
+
const visuallyRefreshedButton = /*#__PURE__*/React.createElement(Box, {
|
|
54
58
|
xcss: headCellStyles.headCellContainer,
|
|
55
59
|
onMouseEnter: handleMouseEnter,
|
|
56
|
-
onMouseLeave: handleMouseLeave
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
color: "color.text.subtle",
|
|
60
|
-
weight: "bold",
|
|
61
|
-
maxLines: 1
|
|
62
|
-
}, content), /*#__PURE__*/React.createElement(Flex, {
|
|
63
|
-
xcss: styles.buttonWrapper
|
|
60
|
+
onMouseLeave: handleMouseLeave,
|
|
61
|
+
onFocus: handleFocus,
|
|
62
|
+
onBlur: handleBlur
|
|
64
63
|
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
65
64
|
content: sortOrder === ASC ? ascendingSortTooltip : descendingSortTooltip
|
|
66
65
|
}, /*#__PURE__*/React.createElement(Pressable, {
|
|
67
66
|
onClick: onClick,
|
|
68
|
-
xcss:
|
|
67
|
+
xcss: styles.buttonWrapper,
|
|
69
68
|
"aria-roledescription": buttonAriaRoleDescription
|
|
69
|
+
}, /*#__PURE__*/React.createElement(Flex, {
|
|
70
|
+
xcss: isVisibleIconOnlyHeader ? styles.hideIconHeaderWrapper : styles.visibleHeaderWrapper
|
|
71
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
72
|
+
size: "small",
|
|
73
|
+
color: "color.text.subtle",
|
|
74
|
+
weight: "bold",
|
|
75
|
+
maxLines: 1
|
|
76
|
+
}, content)), shouldRenderSortIcon && /*#__PURE__*/React.createElement(Flex, {
|
|
77
|
+
xcss: isSortIconVisible ? styles.sortIconVisibleWrapper : styles.sortIconHiddenWrapper
|
|
70
78
|
}, sortOrder === ASC ? /*#__PURE__*/React.createElement(ArrowUpIcon, {
|
|
71
79
|
label: "",
|
|
72
|
-
color: "var(--ds-text-subtle, #44546F)"
|
|
80
|
+
color: "var(--ds-text-subtle, #44546F)",
|
|
81
|
+
testId: testId && `${testId}--up--icon`
|
|
73
82
|
}) : /*#__PURE__*/React.createElement(ArrowDownIcon, {
|
|
74
83
|
label: "",
|
|
75
|
-
color: "var(--ds-text-subtle, #44546F)"
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
"aria-roledescription": "Sort button"
|
|
79
|
-
}, content);
|
|
84
|
+
color: "var(--ds-text-subtle, #44546F)",
|
|
85
|
+
testId: testId && `${testId}--down--icon`
|
|
86
|
+
})))));
|
|
80
87
|
return /*#__PURE__*/React.createElement(HeadCell
|
|
81
88
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
82
89
|
, _extends({
|
|
@@ -85,7 +92,6 @@ const TableHeadCell = ({
|
|
|
85
92
|
ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
|
|
86
93
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
87
94
|
}, rest, {
|
|
88
|
-
onClick: fg('platform-component-visual-refresh') ? undefined : onClick,
|
|
89
95
|
isSortable: isSortable,
|
|
90
96
|
sortOrder: sortOrder
|
|
91
97
|
}), isSortable ? visuallyRefreshedButton : content);
|
|
@@ -4,7 +4,9 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
4
4
|
import { validateSortKey } from '../internal/helpers';
|
|
5
5
|
import { Head } from '../styled/table-head';
|
|
6
6
|
import RankableHeadCell from './rankable/table-head-cell';
|
|
7
|
+
import RankableHeadCellOld from './rankable/table-head-cell-old';
|
|
7
8
|
import HeadCell from './table-head-cell';
|
|
9
|
+
import HeadCellOld from './table-head-cell-old';
|
|
8
10
|
class TableHead extends React.Component {
|
|
9
11
|
constructor(props) {
|
|
10
12
|
super(props);
|
|
@@ -37,6 +39,7 @@ class TableHead extends React.Component {
|
|
|
37
39
|
if (!head) {
|
|
38
40
|
return null;
|
|
39
41
|
}
|
|
42
|
+
const HeadCellComponentOld = isRankable ? RankableHeadCellOld : HeadCellOld;
|
|
40
43
|
const HeadCellComponent = isRankable ? RankableHeadCell : HeadCell;
|
|
41
44
|
|
|
42
45
|
// TODO: Remove `rest` props and use only what is explicitly in the API.
|
|
@@ -57,6 +60,7 @@ class TableHead extends React.Component {
|
|
|
57
60
|
colSpan,
|
|
58
61
|
content,
|
|
59
62
|
descendingSortTooltip,
|
|
63
|
+
isIconOnlyHeader,
|
|
60
64
|
isSortable,
|
|
61
65
|
key,
|
|
62
66
|
shouldTruncate,
|
|
@@ -67,22 +71,19 @@ class TableHead extends React.Component {
|
|
|
67
71
|
...restCellProps
|
|
68
72
|
} = cell;
|
|
69
73
|
const headCellId = `head-cell-${index}`;
|
|
70
|
-
const handleClick =
|
|
74
|
+
const handleClick = () => {
|
|
71
75
|
this.setState({
|
|
72
76
|
activeSortButtonId: headCellId
|
|
73
77
|
});
|
|
74
78
|
if (isSortable) {
|
|
75
79
|
onSort(cell)();
|
|
76
80
|
}
|
|
77
|
-
} : () => {
|
|
78
|
-
if (isSortable) {
|
|
79
|
-
onSort(cell)();
|
|
80
|
-
}
|
|
81
81
|
};
|
|
82
|
-
return /*#__PURE__*/React.createElement(HeadCellComponent, _extends({
|
|
82
|
+
return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(HeadCellComponent, _extends({
|
|
83
83
|
colSpan: colSpan,
|
|
84
84
|
content: content,
|
|
85
85
|
isFixedSize: isFixedSize,
|
|
86
|
+
isIconOnlyHeader: isIconOnlyHeader,
|
|
86
87
|
isSortable: !!isSortable,
|
|
87
88
|
isRanking: isRanking,
|
|
88
89
|
key: key || index,
|
|
@@ -96,6 +97,18 @@ class TableHead extends React.Component {
|
|
|
96
97
|
ascendingSortTooltip: ascendingSortTooltip,
|
|
97
98
|
descendingSortTooltip: descendingSortTooltip,
|
|
98
99
|
buttonAriaRoleDescription: buttonAriaRoleDescription
|
|
100
|
+
}, restCellProps)) : /*#__PURE__*/React.createElement(HeadCellComponentOld, _extends({
|
|
101
|
+
colSpan: colSpan,
|
|
102
|
+
content: content,
|
|
103
|
+
isFixedSize: isFixedSize,
|
|
104
|
+
isSortable: !!isSortable,
|
|
105
|
+
isRanking: isRanking,
|
|
106
|
+
key: key || index,
|
|
107
|
+
onClick: isSortable ? onSort(cell) : undefined,
|
|
108
|
+
testId: cellTestId || testId,
|
|
109
|
+
shouldTruncate: shouldTruncate,
|
|
110
|
+
sortOrder: key === sortKey ? sortOrder : undefined,
|
|
111
|
+
width: width
|
|
99
112
|
}, restCellProps));
|
|
100
113
|
})));
|
|
101
114
|
}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
4
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
5
|
+
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
|
|
6
|
+
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
|
+
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
|
+
var _excluded = ["isRanking", "refHeight", "refWidth"];
|
|
9
|
+
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
10
|
+
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
11
|
+
// Delete this file when cleaning up platform-component-visual-refresh FG
|
|
12
|
+
import React from 'react';
|
|
13
|
+
import withDimensions from '../../hoc/with-dimensions';
|
|
14
|
+
import { inlineStylesIfRanking } from '../../internal/helpers';
|
|
15
|
+
import HeadCell from '../table-head-cell-old';
|
|
16
|
+
var RankableTableHeadCellComponentOld = /*#__PURE__*/function (_React$Component) {
|
|
17
|
+
function RankableTableHeadCellComponentOld() {
|
|
18
|
+
_classCallCheck(this, RankableTableHeadCellComponentOld);
|
|
19
|
+
return _callSuper(this, RankableTableHeadCellComponentOld, arguments);
|
|
20
|
+
}
|
|
21
|
+
_inherits(RankableTableHeadCellComponentOld, _React$Component);
|
|
22
|
+
return _createClass(RankableTableHeadCellComponentOld, [{
|
|
23
|
+
key: "render",
|
|
24
|
+
value: function render() {
|
|
25
|
+
var _this$props = this.props,
|
|
26
|
+
isRanking = _this$props.isRanking,
|
|
27
|
+
refHeight = _this$props.refHeight,
|
|
28
|
+
refWidth = _this$props.refWidth,
|
|
29
|
+
restProps = _objectWithoutProperties(_this$props, _excluded);
|
|
30
|
+
var inlineStyles = inlineStylesIfRanking(isRanking, refWidth);
|
|
31
|
+
return /*#__PURE__*/React.createElement(HeadCell, _extends({
|
|
32
|
+
inlineStyles: inlineStyles
|
|
33
|
+
}, restProps));
|
|
34
|
+
}
|
|
35
|
+
}]);
|
|
36
|
+
}(React.Component);
|
|
37
|
+
var RankableTableHeadCellOld = withDimensions(RankableTableHeadCellComponentOld);
|
|
38
|
+
|
|
39
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
40
|
+
export default RankableTableHeadCellOld;
|
|
@@ -76,14 +76,14 @@ var DynamicTable = function DynamicTable(_ref) {
|
|
|
76
76
|
action: 'sorted',
|
|
77
77
|
componentName: 'dynamicTable',
|
|
78
78
|
packageName: "@atlaskit/dynamic-table",
|
|
79
|
-
packageVersion: "17.0.
|
|
79
|
+
packageVersion: "17.0.3"
|
|
80
80
|
});
|
|
81
81
|
var onRankEnd = usePlatformLeafEventHandler({
|
|
82
82
|
fn: providedOnRankEnd,
|
|
83
83
|
action: 'ranked',
|
|
84
84
|
componentName: 'dynamicTable',
|
|
85
85
|
packageName: "@atlaskit/dynamic-table",
|
|
86
|
-
packageVersion: "17.0.
|
|
86
|
+
packageVersion: "17.0.3"
|
|
87
87
|
});
|
|
88
88
|
useEffect(function () {
|
|
89
89
|
validateSortKey(sortKey, head);
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
3
|
+
var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "onClick"];
|
|
4
|
+
// Delete this file when cleaning up platform-component-visual-refresh FG
|
|
5
|
+
import React from 'react';
|
|
6
|
+
import { HeadCell } from '../styled/table-head';
|
|
7
|
+
var TableHeadCellOld = function TableHeadCellOld(_ref) {
|
|
8
|
+
var content = _ref.content,
|
|
9
|
+
inlineStyles = _ref.inlineStyles,
|
|
10
|
+
testId = _ref.testId,
|
|
11
|
+
isRanking = _ref.isRanking,
|
|
12
|
+
innerRef = _ref.innerRef,
|
|
13
|
+
isSortable = _ref.isSortable,
|
|
14
|
+
onClick = _ref.onClick,
|
|
15
|
+
rest = _objectWithoutProperties(_ref, _excluded);
|
|
16
|
+
return /*#__PURE__*/React.createElement(HeadCell
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
18
|
+
, _extends({
|
|
19
|
+
style: inlineStyles,
|
|
20
|
+
testId: testId && "".concat(testId, "--head--cell"),
|
|
21
|
+
ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
|
|
22
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
23
|
+
}, rest, {
|
|
24
|
+
onClick: onClick,
|
|
25
|
+
isSortable: isSortable
|
|
26
|
+
}), isSortable ? /*#__PURE__*/React.createElement("button", {
|
|
27
|
+
type: "button",
|
|
28
|
+
"aria-roledescription": "Sort button"
|
|
29
|
+
}, content) : content);
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
// eslint-disable-next-line @repo/internal/react/require-jsdoc
|
|
33
|
+
export default TableHeadCellOld;
|
|
@@ -1,9 +1,11 @@
|
|
|
1
1
|
|
|
2
|
-
._1yt41b66{padding:var(--ds-space-050,4px)}
|
|
2
|
+
._1yt41b66{padding:var(--ds-space-050,4px)}
|
|
3
|
+
._1yt4ze3t{padding:var(--ds-space-0,0)}._18u010v4{margin-left:var(--ds-space-negative-300,-24px)}
|
|
3
4
|
._1e0c1txw{display:flex}
|
|
4
5
|
._4cvr1h6o{align-items:center}
|
|
5
6
|
._bfhk18uv{background-color:initial}
|
|
6
7
|
._tzy4idpf{opacity:0}
|
|
7
8
|
._tzy4kb7n{opacity:1}
|
|
9
|
+
._u5f31b66{padding-right:var(--ds-space-050,4px)}
|
|
8
10
|
._1h7hkb7n:focus{opacity:1}
|
|
9
11
|
._d0altlke:hover{cursor:pointer}
|
|
@@ -2,21 +2,22 @@
|
|
|
2
2
|
import _extends from "@babel/runtime/helpers/extends";
|
|
3
3
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
4
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
5
|
-
var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId", "ascendingSortTooltip", "descendingSortTooltip", "buttonAriaRoleDescription"];
|
|
5
|
+
var _excluded = ["content", "inlineStyles", "testId", "isRanking", "innerRef", "isSortable", "sortOrder", "onClick", "headCellId", "activeSortButtonId", "ascendingSortTooltip", "descendingSortTooltip", "buttonAriaRoleDescription", "isIconOnlyHeader"];
|
|
6
6
|
import "./table-head-cell.compiled.css";
|
|
7
7
|
import { ax, ix } from "@compiled/react/runtime";
|
|
8
8
|
import React, { useCallback, useState } from 'react';
|
|
9
9
|
import ArrowDownIcon from '@atlaskit/icon/core/arrow-down';
|
|
10
10
|
import ArrowUpIcon from '@atlaskit/icon/core/arrow-up';
|
|
11
|
-
import { fg } from '@atlaskit/platform-feature-flags';
|
|
12
11
|
import { Box, Flex, Pressable, Text } from '@atlaskit/primitives/compiled';
|
|
13
12
|
import Tooltip from '@atlaskit/tooltip';
|
|
14
13
|
import { ASC } from '../internal/constants';
|
|
15
14
|
import { HeadCell } from '../styled/table-head';
|
|
16
15
|
var styles = {
|
|
17
|
-
buttonWrapper: "
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
buttonWrapper: "_1yt4ze3t _1e0c1txw _bfhk18uv _4cvr1h6o _d0altlke",
|
|
17
|
+
sortIconHiddenWrapper: "_1yt41b66 _1e0c1txw _tzy4idpf _bfhk18uv _1h7hkb7n",
|
|
18
|
+
sortIconVisibleWrapper: "_1yt41b66 _1e0c1txw _tzy4kb7n _bfhk18uv",
|
|
19
|
+
hideIconHeaderWrapper: "_tzy4idpf _18u010v4",
|
|
20
|
+
visibleHeaderWrapper: "_tzy4kb7n _u5f31b66"
|
|
20
21
|
};
|
|
21
22
|
var headCellStyles = {
|
|
22
23
|
headCellContainer: "_1e0c1txw _4cvr1h6o"
|
|
@@ -38,53 +39,62 @@ var TableHeadCell = function TableHeadCell(_ref) {
|
|
|
38
39
|
descendingSortTooltip = _ref$descendingSortTo === void 0 ? 'Sort descending' : _ref$descendingSortTo,
|
|
39
40
|
_ref$buttonAriaRoleDe = _ref.buttonAriaRoleDescription,
|
|
40
41
|
buttonAriaRoleDescription = _ref$buttonAriaRoleDe === void 0 ? 'Sort button' : _ref$buttonAriaRoleDe,
|
|
42
|
+
isIconOnlyHeader = _ref.isIconOnlyHeader,
|
|
41
43
|
rest = _objectWithoutProperties(_ref, _excluded);
|
|
42
|
-
var
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
44
|
+
var _useState = useState(false),
|
|
45
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
46
|
+
isHovered = _useState2[0],
|
|
47
|
+
setIsHovered = _useState2[1];
|
|
48
|
+
var _useState3 = useState(false),
|
|
49
|
+
_useState4 = _slicedToArray(_useState3, 2),
|
|
50
|
+
isFocused = _useState4[0],
|
|
51
|
+
setIsFocused = _useState4[1];
|
|
52
|
+
var isActive = headCellId === activeSortButtonId || sortOrder !== undefined;
|
|
53
|
+
var isSortIconVisible = isHovered || isActive || isFocused;
|
|
54
|
+
var isVisibleIconOnlyHeader = isSortIconVisible && isIconOnlyHeader;
|
|
55
|
+
var shouldRenderSortIcon = !isIconOnlyHeader || isSortIconVisible || isIconOnlyHeader && !isFocused;
|
|
56
|
+
var handleFocus = useCallback(function () {
|
|
57
|
+
setIsFocused === null || setIsFocused === void 0 || setIsFocused(true);
|
|
58
|
+
}, [setIsFocused]);
|
|
59
|
+
var handleBlur = useCallback(function () {
|
|
60
|
+
setIsFocused === null || setIsFocused === void 0 || setIsFocused(false);
|
|
61
|
+
}, [setIsFocused]);
|
|
49
62
|
var handleMouseEnter = useCallback(function () {
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
setIsHovered(true);
|
|
53
|
-
}
|
|
54
|
-
}, [isHovered, setIsHovered]);
|
|
63
|
+
setIsHovered(true);
|
|
64
|
+
}, [setIsHovered]);
|
|
55
65
|
var handleMouseLeave = useCallback(function () {
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
}
|
|
60
|
-
}, [isHovered, setIsHovered]);
|
|
61
|
-
var visuallyRefreshedButton = fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(Box, {
|
|
66
|
+
setIsHovered(false);
|
|
67
|
+
}, [setIsHovered]);
|
|
68
|
+
var visuallyRefreshedButton = /*#__PURE__*/React.createElement(Box, {
|
|
62
69
|
xcss: headCellStyles.headCellContainer,
|
|
63
70
|
onMouseEnter: handleMouseEnter,
|
|
64
|
-
onMouseLeave: handleMouseLeave
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
color: "color.text.subtle",
|
|
68
|
-
weight: "bold",
|
|
69
|
-
maxLines: 1
|
|
70
|
-
}, content), /*#__PURE__*/React.createElement(Flex, {
|
|
71
|
-
xcss: styles.buttonWrapper
|
|
71
|
+
onMouseLeave: handleMouseLeave,
|
|
72
|
+
onFocus: handleFocus,
|
|
73
|
+
onBlur: handleBlur
|
|
72
74
|
}, /*#__PURE__*/React.createElement(Tooltip, {
|
|
73
75
|
content: sortOrder === ASC ? ascendingSortTooltip : descendingSortTooltip
|
|
74
76
|
}, /*#__PURE__*/React.createElement(Pressable, {
|
|
75
77
|
onClick: onClick,
|
|
76
|
-
xcss:
|
|
78
|
+
xcss: styles.buttonWrapper,
|
|
77
79
|
"aria-roledescription": buttonAriaRoleDescription
|
|
80
|
+
}, /*#__PURE__*/React.createElement(Flex, {
|
|
81
|
+
xcss: isVisibleIconOnlyHeader ? styles.hideIconHeaderWrapper : styles.visibleHeaderWrapper
|
|
82
|
+
}, /*#__PURE__*/React.createElement(Text, {
|
|
83
|
+
size: "small",
|
|
84
|
+
color: "color.text.subtle",
|
|
85
|
+
weight: "bold",
|
|
86
|
+
maxLines: 1
|
|
87
|
+
}, content)), shouldRenderSortIcon && /*#__PURE__*/React.createElement(Flex, {
|
|
88
|
+
xcss: isSortIconVisible ? styles.sortIconVisibleWrapper : styles.sortIconHiddenWrapper
|
|
78
89
|
}, sortOrder === ASC ? /*#__PURE__*/React.createElement(ArrowUpIcon, {
|
|
79
90
|
label: "",
|
|
80
|
-
color: "var(--ds-text-subtle, #44546F)"
|
|
91
|
+
color: "var(--ds-text-subtle, #44546F)",
|
|
92
|
+
testId: testId && "".concat(testId, "--up--icon")
|
|
81
93
|
}) : /*#__PURE__*/React.createElement(ArrowDownIcon, {
|
|
82
94
|
label: "",
|
|
83
|
-
color: "var(--ds-text-subtle, #44546F)"
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
"aria-roledescription": "Sort button"
|
|
87
|
-
}, content);
|
|
95
|
+
color: "var(--ds-text-subtle, #44546F)",
|
|
96
|
+
testId: testId && "".concat(testId, "--down--icon")
|
|
97
|
+
})))));
|
|
88
98
|
return /*#__PURE__*/React.createElement(HeadCell
|
|
89
99
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
90
100
|
, _extends({
|
|
@@ -93,7 +103,6 @@ var TableHeadCell = function TableHeadCell(_ref) {
|
|
|
93
103
|
ref: typeof innerRef !== 'string' ? innerRef : null // string refs must be discarded as LegacyRefs are not compatible with FC forwardRefs
|
|
94
104
|
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
95
105
|
}, rest, {
|
|
96
|
-
onClick: fg('platform-component-visual-refresh') ? undefined : onClick,
|
|
97
106
|
isSortable: isSortable,
|
|
98
107
|
sortOrder: sortOrder
|
|
99
108
|
}), isSortable ? visuallyRefreshedButton : content);
|
|
@@ -6,7 +6,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
|
|
|
6
6
|
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
|
|
7
7
|
import _inherits from "@babel/runtime/helpers/inherits";
|
|
8
8
|
var _excluded = ["cells"],
|
|
9
|
-
_excluded2 = ["ascendingSortTooltip", "buttonAriaRoleDescription", "colSpan", "content", "descendingSortTooltip", "isSortable", "key", "shouldTruncate", "testId", "width"];
|
|
9
|
+
_excluded2 = ["ascendingSortTooltip", "buttonAriaRoleDescription", "colSpan", "content", "descendingSortTooltip", "isIconOnlyHeader", "isSortable", "key", "shouldTruncate", "testId", "width"];
|
|
10
10
|
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
|
|
11
11
|
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
|
|
12
12
|
import React from 'react';
|
|
@@ -14,7 +14,9 @@ import { fg } from '@atlaskit/platform-feature-flags';
|
|
|
14
14
|
import { validateSortKey } from '../internal/helpers';
|
|
15
15
|
import { Head } from '../styled/table-head';
|
|
16
16
|
import RankableHeadCell from './rankable/table-head-cell';
|
|
17
|
+
import RankableHeadCellOld from './rankable/table-head-cell-old';
|
|
17
18
|
import HeadCell from './table-head-cell';
|
|
19
|
+
import HeadCellOld from './table-head-cell-old';
|
|
18
20
|
var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
19
21
|
function TableHead(props) {
|
|
20
22
|
var _this;
|
|
@@ -55,6 +57,7 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
55
57
|
if (!head) {
|
|
56
58
|
return null;
|
|
57
59
|
}
|
|
60
|
+
var HeadCellComponentOld = isRankable ? RankableHeadCellOld : HeadCellOld;
|
|
58
61
|
var HeadCellComponent = isRankable ? RankableHeadCell : HeadCell;
|
|
59
62
|
|
|
60
63
|
// TODO: Remove `rest` props and use only what is explicitly in the API.
|
|
@@ -72,6 +75,7 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
72
75
|
colSpan = cell.colSpan,
|
|
73
76
|
content = cell.content,
|
|
74
77
|
descendingSortTooltip = cell.descendingSortTooltip,
|
|
78
|
+
isIconOnlyHeader = cell.isIconOnlyHeader,
|
|
75
79
|
isSortable = cell.isSortable,
|
|
76
80
|
key = cell.key,
|
|
77
81
|
shouldTruncate = cell.shouldTruncate,
|
|
@@ -79,22 +83,19 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
79
83
|
width = cell.width,
|
|
80
84
|
restCellProps = _objectWithoutProperties(cell, _excluded2);
|
|
81
85
|
var headCellId = "head-cell-".concat(index);
|
|
82
|
-
var handleClick =
|
|
86
|
+
var handleClick = function handleClick() {
|
|
83
87
|
_this2.setState({
|
|
84
88
|
activeSortButtonId: headCellId
|
|
85
89
|
});
|
|
86
90
|
if (isSortable) {
|
|
87
91
|
onSort(cell)();
|
|
88
92
|
}
|
|
89
|
-
} : function () {
|
|
90
|
-
if (isSortable) {
|
|
91
|
-
onSort(cell)();
|
|
92
|
-
}
|
|
93
93
|
};
|
|
94
|
-
return /*#__PURE__*/React.createElement(HeadCellComponent, _extends({
|
|
94
|
+
return fg('platform-component-visual-refresh') ? /*#__PURE__*/React.createElement(HeadCellComponent, _extends({
|
|
95
95
|
colSpan: colSpan,
|
|
96
96
|
content: content,
|
|
97
97
|
isFixedSize: isFixedSize,
|
|
98
|
+
isIconOnlyHeader: isIconOnlyHeader,
|
|
98
99
|
isSortable: !!isSortable,
|
|
99
100
|
isRanking: isRanking,
|
|
100
101
|
key: key || index,
|
|
@@ -108,6 +109,18 @@ var TableHead = /*#__PURE__*/function (_React$Component) {
|
|
|
108
109
|
ascendingSortTooltip: ascendingSortTooltip,
|
|
109
110
|
descendingSortTooltip: descendingSortTooltip,
|
|
110
111
|
buttonAriaRoleDescription: buttonAriaRoleDescription
|
|
112
|
+
}, restCellProps)) : /*#__PURE__*/React.createElement(HeadCellComponentOld, _extends({
|
|
113
|
+
colSpan: colSpan,
|
|
114
|
+
content: content,
|
|
115
|
+
isFixedSize: isFixedSize,
|
|
116
|
+
isSortable: !!isSortable,
|
|
117
|
+
isRanking: isRanking,
|
|
118
|
+
key: key || index,
|
|
119
|
+
onClick: isSortable ? onSort(cell) : undefined,
|
|
120
|
+
testId: cellTestId || testId,
|
|
121
|
+
shouldTruncate: shouldTruncate,
|
|
122
|
+
sortOrder: key === sortKey ? sortOrder : undefined,
|
|
123
|
+
width: width
|
|
111
124
|
}, restCellProps));
|
|
112
125
|
})));
|
|
113
126
|
}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type WithDimensionsProps } from '../../hoc/with-dimensions';
|
|
3
|
+
import { type TableHeadCellProps } from '../table-head-cell-old';
|
|
4
|
+
declare const RankableTableHeadCellOld: React.ComponentClass<Omit<WithDimensionsProps & TableHeadCellProps, "innerRef" | "refWidth" | "refHeight">, import("../../hoc/with-dimensions").State>;
|
|
5
|
+
export default RankableTableHeadCellOld;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React, { type FC, type Ref } from 'react';
|
|
2
|
+
import { type SortOrderType } from '../types';
|
|
3
|
+
export interface TableHeadCellProps {
|
|
4
|
+
colSpan?: number;
|
|
5
|
+
sortKey?: string;
|
|
6
|
+
isSortable?: boolean;
|
|
7
|
+
sortOrder?: SortOrderType;
|
|
8
|
+
isFixedSize?: boolean;
|
|
9
|
+
innerRef?: Ref<HTMLTableCellElement>;
|
|
10
|
+
inlineStyles?: {};
|
|
11
|
+
content?: React.ReactNode;
|
|
12
|
+
onClick?: () => void;
|
|
13
|
+
shouldTruncate?: boolean;
|
|
14
|
+
testId?: string;
|
|
15
|
+
width?: number;
|
|
16
|
+
isRanking?: boolean;
|
|
17
|
+
}
|
|
18
|
+
declare const TableHeadCellOld: FC<TableHeadCellProps>;
|
|
19
|
+
export default TableHeadCellOld;
|
|
@@ -19,6 +19,7 @@ export interface TableHeadCellProps {
|
|
|
19
19
|
ascendingSortTooltip?: string;
|
|
20
20
|
descendingSortTooltip?: string;
|
|
21
21
|
buttonAriaRoleDescription?: string;
|
|
22
|
+
isIconOnlyHeader?: boolean;
|
|
22
23
|
}
|
|
23
24
|
declare const TableHeadCell: FC<TableHeadCellProps>;
|
|
24
25
|
export default TableHeadCell;
|
package/dist/types/types.d.ts
CHANGED
|
@@ -148,6 +148,8 @@ export interface StatelessProps extends WithAnalyticsEventsProps {
|
|
|
148
148
|
* - `{testId}--table` - Table.
|
|
149
149
|
* - `{testId}--head` - Table header.
|
|
150
150
|
* - `{testId}--head--{content of the cell}` - Table header cell can be identified by their content.
|
|
151
|
+
* - `{testId}--head--up--icon` - Table header cell sort button arrow up icon.
|
|
152
|
+
* - `{testId}--head--down--icon` - Table header cell sort button arrow down icon.
|
|
151
153
|
* - `{testId}--row--{index - content of the first cell}` - Table row.
|
|
152
154
|
* - `{testId}--body` - Table body.
|
|
153
155
|
* - `{testId}--body--{content of the cell}` - Table body cell can be identified by their content.
|
|
@@ -353,6 +355,11 @@ export interface HeadCellType extends RowCellType {
|
|
|
353
355
|
* Defaults to "Sort button".
|
|
354
356
|
*/
|
|
355
357
|
buttonAriaRoleDescription?: string;
|
|
358
|
+
/**
|
|
359
|
+
* Whether the sortable column header is only an icon.
|
|
360
|
+
* If true, the sort button on hover or when active will be shown instead of the icon.
|
|
361
|
+
*/
|
|
362
|
+
isIconOnlyHeader?: boolean;
|
|
356
363
|
}
|
|
357
364
|
export interface RankEndLocation {
|
|
358
365
|
index: number;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type WithDimensionsProps } from '../../hoc/with-dimensions';
|
|
3
|
+
import { type TableHeadCellProps } from '../table-head-cell-old';
|
|
4
|
+
declare const RankableTableHeadCellOld: React.ComponentClass<Omit<WithDimensionsProps & TableHeadCellProps, "innerRef" | "refWidth" | "refHeight">, import("../../hoc/with-dimensions").State>;
|
|
5
|
+
export default RankableTableHeadCellOld;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import React, { type FC, type Ref } from 'react';
|
|
2
|
+
import { type SortOrderType } from '../types';
|
|
3
|
+
export interface TableHeadCellProps {
|
|
4
|
+
colSpan?: number;
|
|
5
|
+
sortKey?: string;
|
|
6
|
+
isSortable?: boolean;
|
|
7
|
+
sortOrder?: SortOrderType;
|
|
8
|
+
isFixedSize?: boolean;
|
|
9
|
+
innerRef?: Ref<HTMLTableCellElement>;
|
|
10
|
+
inlineStyles?: {};
|
|
11
|
+
content?: React.ReactNode;
|
|
12
|
+
onClick?: () => void;
|
|
13
|
+
shouldTruncate?: boolean;
|
|
14
|
+
testId?: string;
|
|
15
|
+
width?: number;
|
|
16
|
+
isRanking?: boolean;
|
|
17
|
+
}
|
|
18
|
+
declare const TableHeadCellOld: FC<TableHeadCellProps>;
|
|
19
|
+
export default TableHeadCellOld;
|
|
@@ -19,6 +19,7 @@ export interface TableHeadCellProps {
|
|
|
19
19
|
ascendingSortTooltip?: string;
|
|
20
20
|
descendingSortTooltip?: string;
|
|
21
21
|
buttonAriaRoleDescription?: string;
|
|
22
|
+
isIconOnlyHeader?: boolean;
|
|
22
23
|
}
|
|
23
24
|
declare const TableHeadCell: FC<TableHeadCellProps>;
|
|
24
25
|
export default TableHeadCell;
|
|
@@ -148,6 +148,8 @@ export interface StatelessProps extends WithAnalyticsEventsProps {
|
|
|
148
148
|
* - `{testId}--table` - Table.
|
|
149
149
|
* - `{testId}--head` - Table header.
|
|
150
150
|
* - `{testId}--head--{content of the cell}` - Table header cell can be identified by their content.
|
|
151
|
+
* - `{testId}--head--up--icon` - Table header cell sort button arrow up icon.
|
|
152
|
+
* - `{testId}--head--down--icon` - Table header cell sort button arrow down icon.
|
|
151
153
|
* - `{testId}--row--{index - content of the first cell}` - Table row.
|
|
152
154
|
* - `{testId}--body` - Table body.
|
|
153
155
|
* - `{testId}--body--{content of the cell}` - Table body cell can be identified by their content.
|
|
@@ -353,6 +355,11 @@ export interface HeadCellType extends RowCellType {
|
|
|
353
355
|
* Defaults to "Sort button".
|
|
354
356
|
*/
|
|
355
357
|
buttonAriaRoleDescription?: string;
|
|
358
|
+
/**
|
|
359
|
+
* Whether the sortable column header is only an icon.
|
|
360
|
+
* If true, the sort button on hover or when active will be shown instead of the icon.
|
|
361
|
+
*/
|
|
362
|
+
isIconOnlyHeader?: boolean;
|
|
356
363
|
}
|
|
357
364
|
export interface RankEndLocation {
|
|
358
365
|
index: number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/dynamic-table",
|
|
3
|
-
"version": "17.0.
|
|
3
|
+
"version": "17.0.3",
|
|
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/"
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@atlaskit/pragmatic-drag-and-drop-react-beautiful-dnd-migration": "^1.3.0",
|
|
47
47
|
"@atlaskit/spinner": "^16.3.0",
|
|
48
48
|
"@atlaskit/theme": "^14.0.0",
|
|
49
|
-
"@atlaskit/tokens": "^3.
|
|
49
|
+
"@atlaskit/tokens": "^3.1.0",
|
|
50
50
|
"@babel/runtime": "^7.0.0",
|
|
51
51
|
"@emotion/react": "^11.7.1",
|
|
52
52
|
"react-beautiful-dnd": "^12.2.0"
|