@atlaskit/table-tree 9.4.2 → 9.5.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 +7 -0
- package/dist/cjs/components/internal/chevron.js +8 -3
- package/dist/cjs/components/row.js +19 -3
- package/dist/cjs/components/table-tree.js +4 -2
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/components/internal/chevron.js +6 -3
- package/dist/es2019/components/row.js +19 -3
- package/dist/es2019/components/table-tree.js +17 -13
- package/dist/es2019/version.json +1 -1
- package/dist/esm/components/internal/chevron.js +8 -3
- package/dist/esm/components/row.js +19 -3
- package/dist/esm/components/table-tree.js +4 -2
- package/dist/esm/version.json +1 -1
- package/dist/types/components/internal/chevron.d.ts +2 -0
- package/dist/types/components/row.d.ts +1 -0
- package/dist/types-ts4.5/components/internal/chevron.d.ts +2 -0
- package/dist/types-ts4.5/components/row.d.ts +1 -0
- package/extract-react-types/table-tree-row.tsx +9 -0
- package/extract-react-types/table-tree.tsx +7 -0
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/table-tree
|
|
2
2
|
|
|
3
|
+
## 9.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`6e5546981a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e5546981a3) - Accessibility: Fix the chevron button label.
|
|
8
|
+
Add a new prop `mainColumnForExpandCollapseLabel` that allows you to show a chevron label with row contents instead of a row index.
|
|
9
|
+
|
|
3
10
|
## 9.4.2
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -47,20 +47,25 @@ var Chevron = /*#__PURE__*/function (_Component) {
|
|
|
47
47
|
isExpanded = _this$props.isExpanded,
|
|
48
48
|
ariaControls = _this$props.ariaControls,
|
|
49
49
|
collapseLabel = _this$props.collapseLabel,
|
|
50
|
-
expandLabel = _this$props.expandLabel
|
|
50
|
+
expandLabel = _this$props.expandLabel,
|
|
51
|
+
rowId = _this$props.rowId,
|
|
52
|
+
extendedLabel = _this$props.extendedLabel;
|
|
51
53
|
var iconProps = {
|
|
52
54
|
size: 'medium',
|
|
53
55
|
primaryColor: _styled.iconColor
|
|
54
56
|
};
|
|
57
|
+
var getLabel = function getLabel(defaultLabel) {
|
|
58
|
+
return extendedLabel ? "".concat(defaultLabel, " ").concat(extendedLabel, " row") : "".concat(defaultLabel, " row ").concat(rowId);
|
|
59
|
+
};
|
|
55
60
|
return /*#__PURE__*/_react.default.createElement(_styled.ChevronContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
|
|
56
61
|
spacing: "none",
|
|
57
62
|
appearance: "subtle",
|
|
58
63
|
"aria-controls": ariaControls,
|
|
59
64
|
onClick: this.handleClick
|
|
60
65
|
}, /*#__PURE__*/_react.default.createElement(_styled.ChevronIconContainer, null, isExpanded ? /*#__PURE__*/_react.default.createElement(_chevronDown.default, (0, _extends2.default)({
|
|
61
|
-
label: collapseLabel
|
|
66
|
+
label: getLabel(collapseLabel)
|
|
62
67
|
}, iconProps)) : /*#__PURE__*/_react.default.createElement(_chevronRight.default, (0, _extends2.default)({
|
|
63
|
-
label: expandLabel
|
|
68
|
+
label: getLabel(expandLabel)
|
|
64
69
|
}, iconProps)))));
|
|
65
70
|
}
|
|
66
71
|
}]);
|
|
@@ -28,7 +28,7 @@ var treeRowClickableStyles = (0, _react2.css)({
|
|
|
28
28
|
cursor: 'pointer'
|
|
29
29
|
});
|
|
30
30
|
var packageName = "@atlaskit/table-tree";
|
|
31
|
-
var packageVersion = "9.
|
|
31
|
+
var packageVersion = "9.5.0";
|
|
32
32
|
var Row = /*#__PURE__*/function (_Component) {
|
|
33
33
|
(0, _inherits2.default)(Row, _Component);
|
|
34
34
|
var _super = _createSuper(Row);
|
|
@@ -64,6 +64,18 @@ var Row = /*#__PURE__*/function (_Component) {
|
|
|
64
64
|
_this.onExpandStateChange(!_this.state.isExpanded);
|
|
65
65
|
}
|
|
66
66
|
});
|
|
67
|
+
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getExtendedLabel", function (cellContent, cellIndex, mainColumnForExpandCollapseLabel) {
|
|
68
|
+
/**
|
|
69
|
+
* First condition - when we pass data via `items` property in `<TableTree />`
|
|
70
|
+
* Second condition - when we pass data via `<Rows />` as children in `<TableTree />`.
|
|
71
|
+
*/
|
|
72
|
+
if (cellContent.hasOwnProperty('props')) {
|
|
73
|
+
return cellContent === null || cellContent === void 0 ? void 0 : cellContent.props[mainColumnForExpandCollapseLabel === null || mainColumnForExpandCollapseLabel === void 0 ? void 0 : mainColumnForExpandCollapseLabel.toLowerCase()];
|
|
74
|
+
} else if (cellIndex === mainColumnForExpandCollapseLabel) {
|
|
75
|
+
return cellContent;
|
|
76
|
+
}
|
|
77
|
+
return undefined;
|
|
78
|
+
});
|
|
67
79
|
return _this;
|
|
68
80
|
}
|
|
69
81
|
(0, _createClass2.default)(Row, [{
|
|
@@ -102,18 +114,22 @@ var Row = /*#__PURE__*/function (_Component) {
|
|
|
102
114
|
var props = this.props;
|
|
103
115
|
var isExpanded = this.isExpanded();
|
|
104
116
|
var hasChildren = props.hasChildren,
|
|
105
|
-
depth = props.depth
|
|
117
|
+
depth = props.depth,
|
|
118
|
+
mainColumnForExpandCollapseLabel = props.mainColumnForExpandCollapseLabel;
|
|
106
119
|
var isFirstCell = cellIndex === 0;
|
|
107
120
|
var indentLevel = isFirstCell ? depth : 0;
|
|
108
121
|
var cellContent = cell.props.children || [];
|
|
122
|
+
var extendedLabel = this.getExtendedLabel(cellContent, cellIndex, mainColumnForExpandCollapseLabel);
|
|
109
123
|
if (isFirstCell && hasChildren) {
|
|
110
124
|
cellContent = [(0, _react2.jsx)(_chevron.default, {
|
|
111
125
|
key: "chevron",
|
|
112
126
|
expandLabel: props.expandLabel,
|
|
113
127
|
collapseLabel: props.collapseLabel,
|
|
128
|
+
extendedLabel: extendedLabel,
|
|
114
129
|
isExpanded: isExpanded,
|
|
115
130
|
onExpandToggle: this.onExpandToggle,
|
|
116
|
-
ariaControls: (0, _toItemId.default)(props.itemId)
|
|
131
|
+
ariaControls: (0, _toItemId.default)(props.itemId),
|
|
132
|
+
rowId: props.itemId
|
|
117
133
|
})].concat(cellContent);
|
|
118
134
|
}
|
|
119
135
|
return /*#__PURE__*/_react.default.cloneElement(cell, {
|
|
@@ -82,7 +82,8 @@ var TableTree = /*#__PURE__*/function (_Component) {
|
|
|
82
82
|
headers = _this$props.headers,
|
|
83
83
|
columns = _this$props.columns,
|
|
84
84
|
_this$props$columnWid = _this$props.columnWidths,
|
|
85
|
-
columnWidths = _this$props$columnWid === void 0 ? [] : _this$props$columnWid
|
|
85
|
+
columnWidths = _this$props$columnWid === void 0 ? [] : _this$props$columnWid,
|
|
86
|
+
mainColumnForExpandCollapseLabel = _this$props.mainColumnForExpandCollapseLabel;
|
|
86
87
|
var heads = headers && /*#__PURE__*/_react.default.createElement(_headers.default, null, headers.map(function (header, index) {
|
|
87
88
|
return (
|
|
88
89
|
/*#__PURE__*/
|
|
@@ -107,7 +108,8 @@ var TableTree = /*#__PURE__*/function (_Component) {
|
|
|
107
108
|
itemId: id,
|
|
108
109
|
items: children,
|
|
109
110
|
hasChildren: hasChildren,
|
|
110
|
-
shouldExpandOnClick: shouldExpandOnClick
|
|
111
|
+
shouldExpandOnClick: shouldExpandOnClick,
|
|
112
|
+
mainColumnForExpandCollapseLabel: mainColumnForExpandCollapseLabel
|
|
111
113
|
}, columns.map(function (CellContent, index) {
|
|
112
114
|
return /*#__PURE__*/_react.default.createElement(_cell.default
|
|
113
115
|
// eslint-disable-next-line react/no-array-index-key
|
package/dist/cjs/version.json
CHANGED
|
@@ -21,21 +21,24 @@ export default class Chevron extends Component {
|
|
|
21
21
|
isExpanded,
|
|
22
22
|
ariaControls,
|
|
23
23
|
collapseLabel,
|
|
24
|
-
expandLabel
|
|
24
|
+
expandLabel,
|
|
25
|
+
rowId,
|
|
26
|
+
extendedLabel
|
|
25
27
|
} = this.props;
|
|
26
28
|
const iconProps = {
|
|
27
29
|
size: 'medium',
|
|
28
30
|
primaryColor: iconColor
|
|
29
31
|
};
|
|
32
|
+
const getLabel = defaultLabel => extendedLabel ? `${defaultLabel} ${extendedLabel} row` : `${defaultLabel} row ${rowId}`;
|
|
30
33
|
return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(Button, {
|
|
31
34
|
spacing: "none",
|
|
32
35
|
appearance: "subtle",
|
|
33
36
|
"aria-controls": ariaControls,
|
|
34
37
|
onClick: this.handleClick
|
|
35
38
|
}, /*#__PURE__*/React.createElement(ChevronIconContainer, null, isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, _extends({
|
|
36
|
-
label: collapseLabel
|
|
39
|
+
label: getLabel(collapseLabel)
|
|
37
40
|
}, iconProps)) : /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({
|
|
38
|
-
label: expandLabel
|
|
41
|
+
label: getLabel(expandLabel)
|
|
39
42
|
}, iconProps)))));
|
|
40
43
|
}
|
|
41
44
|
}
|
|
@@ -12,7 +12,7 @@ const treeRowClickableStyles = css({
|
|
|
12
12
|
cursor: 'pointer'
|
|
13
13
|
});
|
|
14
14
|
const packageName = "@atlaskit/table-tree";
|
|
15
|
-
const packageVersion = "9.
|
|
15
|
+
const packageVersion = "9.5.0";
|
|
16
16
|
class Row extends Component {
|
|
17
17
|
constructor(...args) {
|
|
18
18
|
super(...args);
|
|
@@ -43,6 +43,18 @@ class Row extends Component {
|
|
|
43
43
|
this.onExpandStateChange(!this.state.isExpanded);
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
|
+
_defineProperty(this, "getExtendedLabel", (cellContent, cellIndex, mainColumnForExpandCollapseLabel) => {
|
|
47
|
+
/**
|
|
48
|
+
* First condition - when we pass data via `items` property in `<TableTree />`
|
|
49
|
+
* Second condition - when we pass data via `<Rows />` as children in `<TableTree />`.
|
|
50
|
+
*/
|
|
51
|
+
if (cellContent.hasOwnProperty('props')) {
|
|
52
|
+
return cellContent === null || cellContent === void 0 ? void 0 : cellContent.props[mainColumnForExpandCollapseLabel === null || mainColumnForExpandCollapseLabel === void 0 ? void 0 : mainColumnForExpandCollapseLabel.toLowerCase()];
|
|
53
|
+
} else if (cellIndex === mainColumnForExpandCollapseLabel) {
|
|
54
|
+
return cellContent;
|
|
55
|
+
}
|
|
56
|
+
return undefined;
|
|
57
|
+
});
|
|
46
58
|
}
|
|
47
59
|
componentDidUpdate(prevProps) {
|
|
48
60
|
const {
|
|
@@ -78,19 +90,23 @@ class Row extends Component {
|
|
|
78
90
|
const isExpanded = this.isExpanded();
|
|
79
91
|
const {
|
|
80
92
|
hasChildren,
|
|
81
|
-
depth
|
|
93
|
+
depth,
|
|
94
|
+
mainColumnForExpandCollapseLabel
|
|
82
95
|
} = props;
|
|
83
96
|
const isFirstCell = cellIndex === 0;
|
|
84
97
|
const indentLevel = isFirstCell ? depth : 0;
|
|
85
98
|
let cellContent = cell.props.children || [];
|
|
99
|
+
const extendedLabel = this.getExtendedLabel(cellContent, cellIndex, mainColumnForExpandCollapseLabel);
|
|
86
100
|
if (isFirstCell && hasChildren) {
|
|
87
101
|
cellContent = [jsx(Chevron, {
|
|
88
102
|
key: "chevron",
|
|
89
103
|
expandLabel: props.expandLabel,
|
|
90
104
|
collapseLabel: props.collapseLabel,
|
|
105
|
+
extendedLabel: extendedLabel,
|
|
91
106
|
isExpanded: isExpanded,
|
|
92
107
|
onExpandToggle: this.onExpandToggle,
|
|
93
|
-
ariaControls: toItemId(props.itemId)
|
|
108
|
+
ariaControls: toItemId(props.itemId),
|
|
109
|
+
rowId: props.itemId
|
|
94
110
|
})].concat(cellContent);
|
|
95
111
|
}
|
|
96
112
|
return /*#__PURE__*/React.cloneElement(cell, {
|
|
@@ -53,7 +53,8 @@ export default class TableTree extends Component {
|
|
|
53
53
|
shouldExpandOnClick,
|
|
54
54
|
headers,
|
|
55
55
|
columns,
|
|
56
|
-
columnWidths = []
|
|
56
|
+
columnWidths = [],
|
|
57
|
+
mainColumnForExpandCollapseLabel
|
|
57
58
|
} = this.props;
|
|
58
59
|
const heads = headers && /*#__PURE__*/React.createElement(Headers, null, headers.map((header, index) =>
|
|
59
60
|
/*#__PURE__*/
|
|
@@ -72,18 +73,21 @@ export default class TableTree extends Component {
|
|
|
72
73
|
children,
|
|
73
74
|
hasChildren,
|
|
74
75
|
content
|
|
75
|
-
}) =>
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
76
|
+
}) => {
|
|
77
|
+
return /*#__PURE__*/React.createElement(Row, {
|
|
78
|
+
itemId: id,
|
|
79
|
+
items: children,
|
|
80
|
+
hasChildren: hasChildren,
|
|
81
|
+
shouldExpandOnClick: shouldExpandOnClick,
|
|
82
|
+
mainColumnForExpandCollapseLabel: mainColumnForExpandCollapseLabel
|
|
83
|
+
}, columns.map((CellContent, index) => /*#__PURE__*/React.createElement(Cell
|
|
84
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
85
|
+
, {
|
|
86
|
+
key: index,
|
|
87
|
+
columnIndex: index,
|
|
88
|
+
width: columnWidths[index]
|
|
89
|
+
}, /*#__PURE__*/React.createElement(CellContent, content))));
|
|
90
|
+
}
|
|
87
91
|
});
|
|
88
92
|
}
|
|
89
93
|
return /*#__PURE__*/React.createElement("div", {
|
package/dist/es2019/version.json
CHANGED
|
@@ -39,20 +39,25 @@ var Chevron = /*#__PURE__*/function (_Component) {
|
|
|
39
39
|
isExpanded = _this$props.isExpanded,
|
|
40
40
|
ariaControls = _this$props.ariaControls,
|
|
41
41
|
collapseLabel = _this$props.collapseLabel,
|
|
42
|
-
expandLabel = _this$props.expandLabel
|
|
42
|
+
expandLabel = _this$props.expandLabel,
|
|
43
|
+
rowId = _this$props.rowId,
|
|
44
|
+
extendedLabel = _this$props.extendedLabel;
|
|
43
45
|
var iconProps = {
|
|
44
46
|
size: 'medium',
|
|
45
47
|
primaryColor: iconColor
|
|
46
48
|
};
|
|
49
|
+
var getLabel = function getLabel(defaultLabel) {
|
|
50
|
+
return extendedLabel ? "".concat(defaultLabel, " ").concat(extendedLabel, " row") : "".concat(defaultLabel, " row ").concat(rowId);
|
|
51
|
+
};
|
|
47
52
|
return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(Button, {
|
|
48
53
|
spacing: "none",
|
|
49
54
|
appearance: "subtle",
|
|
50
55
|
"aria-controls": ariaControls,
|
|
51
56
|
onClick: this.handleClick
|
|
52
57
|
}, /*#__PURE__*/React.createElement(ChevronIconContainer, null, isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, _extends({
|
|
53
|
-
label: collapseLabel
|
|
58
|
+
label: getLabel(collapseLabel)
|
|
54
59
|
}, iconProps)) : /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({
|
|
55
|
-
label: expandLabel
|
|
60
|
+
label: getLabel(expandLabel)
|
|
56
61
|
}, iconProps)))));
|
|
57
62
|
}
|
|
58
63
|
}]);
|
|
@@ -20,7 +20,7 @@ var treeRowClickableStyles = css({
|
|
|
20
20
|
cursor: 'pointer'
|
|
21
21
|
});
|
|
22
22
|
var packageName = "@atlaskit/table-tree";
|
|
23
|
-
var packageVersion = "9.
|
|
23
|
+
var packageVersion = "9.5.0";
|
|
24
24
|
var Row = /*#__PURE__*/function (_Component) {
|
|
25
25
|
_inherits(Row, _Component);
|
|
26
26
|
var _super = _createSuper(Row);
|
|
@@ -56,6 +56,18 @@ var Row = /*#__PURE__*/function (_Component) {
|
|
|
56
56
|
_this.onExpandStateChange(!_this.state.isExpanded);
|
|
57
57
|
}
|
|
58
58
|
});
|
|
59
|
+
_defineProperty(_assertThisInitialized(_this), "getExtendedLabel", function (cellContent, cellIndex, mainColumnForExpandCollapseLabel) {
|
|
60
|
+
/**
|
|
61
|
+
* First condition - when we pass data via `items` property in `<TableTree />`
|
|
62
|
+
* Second condition - when we pass data via `<Rows />` as children in `<TableTree />`.
|
|
63
|
+
*/
|
|
64
|
+
if (cellContent.hasOwnProperty('props')) {
|
|
65
|
+
return cellContent === null || cellContent === void 0 ? void 0 : cellContent.props[mainColumnForExpandCollapseLabel === null || mainColumnForExpandCollapseLabel === void 0 ? void 0 : mainColumnForExpandCollapseLabel.toLowerCase()];
|
|
66
|
+
} else if (cellIndex === mainColumnForExpandCollapseLabel) {
|
|
67
|
+
return cellContent;
|
|
68
|
+
}
|
|
69
|
+
return undefined;
|
|
70
|
+
});
|
|
59
71
|
return _this;
|
|
60
72
|
}
|
|
61
73
|
_createClass(Row, [{
|
|
@@ -94,18 +106,22 @@ var Row = /*#__PURE__*/function (_Component) {
|
|
|
94
106
|
var props = this.props;
|
|
95
107
|
var isExpanded = this.isExpanded();
|
|
96
108
|
var hasChildren = props.hasChildren,
|
|
97
|
-
depth = props.depth
|
|
109
|
+
depth = props.depth,
|
|
110
|
+
mainColumnForExpandCollapseLabel = props.mainColumnForExpandCollapseLabel;
|
|
98
111
|
var isFirstCell = cellIndex === 0;
|
|
99
112
|
var indentLevel = isFirstCell ? depth : 0;
|
|
100
113
|
var cellContent = cell.props.children || [];
|
|
114
|
+
var extendedLabel = this.getExtendedLabel(cellContent, cellIndex, mainColumnForExpandCollapseLabel);
|
|
101
115
|
if (isFirstCell && hasChildren) {
|
|
102
116
|
cellContent = [jsx(Chevron, {
|
|
103
117
|
key: "chevron",
|
|
104
118
|
expandLabel: props.expandLabel,
|
|
105
119
|
collapseLabel: props.collapseLabel,
|
|
120
|
+
extendedLabel: extendedLabel,
|
|
106
121
|
isExpanded: isExpanded,
|
|
107
122
|
onExpandToggle: this.onExpandToggle,
|
|
108
|
-
ariaControls: toItemId(props.itemId)
|
|
123
|
+
ariaControls: toItemId(props.itemId),
|
|
124
|
+
rowId: props.itemId
|
|
109
125
|
})].concat(cellContent);
|
|
110
126
|
}
|
|
111
127
|
return /*#__PURE__*/React.cloneElement(cell, {
|
|
@@ -73,7 +73,8 @@ var TableTree = /*#__PURE__*/function (_Component) {
|
|
|
73
73
|
headers = _this$props.headers,
|
|
74
74
|
columns = _this$props.columns,
|
|
75
75
|
_this$props$columnWid = _this$props.columnWidths,
|
|
76
|
-
columnWidths = _this$props$columnWid === void 0 ? [] : _this$props$columnWid
|
|
76
|
+
columnWidths = _this$props$columnWid === void 0 ? [] : _this$props$columnWid,
|
|
77
|
+
mainColumnForExpandCollapseLabel = _this$props.mainColumnForExpandCollapseLabel;
|
|
77
78
|
var heads = headers && /*#__PURE__*/React.createElement(Headers, null, headers.map(function (header, index) {
|
|
78
79
|
return (
|
|
79
80
|
/*#__PURE__*/
|
|
@@ -98,7 +99,8 @@ var TableTree = /*#__PURE__*/function (_Component) {
|
|
|
98
99
|
itemId: id,
|
|
99
100
|
items: children,
|
|
100
101
|
hasChildren: hasChildren,
|
|
101
|
-
shouldExpandOnClick: shouldExpandOnClick
|
|
102
|
+
shouldExpandOnClick: shouldExpandOnClick,
|
|
103
|
+
mainColumnForExpandCollapseLabel: mainColumnForExpandCollapseLabel
|
|
102
104
|
}, columns.map(function (CellContent, index) {
|
|
103
105
|
return /*#__PURE__*/React.createElement(Cell
|
|
104
106
|
// eslint-disable-next-line react/no-array-index-key
|
package/dist/esm/version.json
CHANGED
|
@@ -14,6 +14,7 @@ declare class Row extends Component<any, any> {
|
|
|
14
14
|
onClickHandler: (e: React.MouseEvent) => void;
|
|
15
15
|
onExpandToggle: () => void;
|
|
16
16
|
isExpanded(): any;
|
|
17
|
+
getExtendedLabel: (cellContent: any, cellIndex: number, mainColumnForExpandCollapseLabel: string | number) => any;
|
|
17
18
|
renderCell(cell: any, cellIndex: number): React.FunctionComponentElement<{
|
|
18
19
|
key: number;
|
|
19
20
|
columnIndex: number;
|
|
@@ -14,6 +14,7 @@ declare class Row extends Component<any, any> {
|
|
|
14
14
|
onClickHandler: (e: React.MouseEvent) => void;
|
|
15
15
|
onExpandToggle: () => void;
|
|
16
16
|
isExpanded(): any;
|
|
17
|
+
getExtendedLabel: (cellContent: any, cellIndex: number, mainColumnForExpandCollapseLabel: string | number) => any;
|
|
17
18
|
renderCell(cell: any, cellIndex: number): React.FunctionComponentElement<{
|
|
18
19
|
key: number;
|
|
19
20
|
columnIndex: number;
|
|
@@ -79,6 +79,15 @@ type RowProps = {
|
|
|
79
79
|
* Normally set by parent Item component and does not need to be configured.
|
|
80
80
|
*/
|
|
81
81
|
depth?: number;
|
|
82
|
+
// eslint-disable-next-line jsdoc/require-asterisk-prefix, jsdoc/check-alignment
|
|
83
|
+
/**
|
|
84
|
+
Adds detail to the expand and collapse row button's aria label by appending the value from the given column. If you don't set this prop, the aria label will read out "Expand `itemId` row".
|
|
85
|
+
|
|
86
|
+
Should be a string when we pass data via `items` property in `<TableTree />`, value should be one of the property `columns` names in `<TableTree />`.
|
|
87
|
+
|
|
88
|
+
Should be a number when we pass data via `<Rows />` component as children in `<TableTree />`.
|
|
89
|
+
*/
|
|
90
|
+
mainColumnForExpandCollapseLabel?: string | number;
|
|
82
91
|
};
|
|
83
92
|
|
|
84
93
|
const TableRow = function (props: RowProps) {
|
|
@@ -54,6 +54,13 @@ type TableTreeProps = {
|
|
|
54
54
|
*/
|
|
55
55
|
// eslint-disable-next-line @repo/internal/react/consistent-props-definitions
|
|
56
56
|
items?: Item[] | null;
|
|
57
|
+
/**
|
|
58
|
+
* The value used to extend the expand or collapse button label in cases where `Row` has child rows.
|
|
59
|
+
*
|
|
60
|
+
* Should be a string when we pass data via `items` property, value should be one of the `columns` names.
|
|
61
|
+
* Should be a number when we pass data via `<Rows />` component as children in `<TableTree />`.
|
|
62
|
+
*/
|
|
63
|
+
mainColumnForExpandCollapseLabel?: string | number;
|
|
57
64
|
};
|
|
58
65
|
|
|
59
66
|
export default function (props: TableTreeProps) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/table-tree",
|
|
3
|
-
"version": "9.
|
|
3
|
+
"version": "9.5.0",
|
|
4
4
|
"description": "A table tree is an expandable table for showing nested hierarchies of information.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"@atlaskit/icon": "^21.12.0",
|
|
41
41
|
"@atlaskit/spinner": "^15.5.0",
|
|
42
42
|
"@atlaskit/theme": "^12.5.0",
|
|
43
|
-
"@atlaskit/tokens": "^1.
|
|
43
|
+
"@atlaskit/tokens": "^1.5.0",
|
|
44
44
|
"@babel/runtime": "^7.0.0",
|
|
45
45
|
"@emotion/react": "^11.7.1",
|
|
46
46
|
"lodash": "^4.17.21",
|
|
@@ -54,7 +54,7 @@
|
|
|
54
54
|
"@atlaskit/ds-lib": "^2.2.0",
|
|
55
55
|
"@atlaskit/empty-state": "^7.5.0",
|
|
56
56
|
"@atlaskit/section-message": "^6.4.0",
|
|
57
|
-
"@atlaskit/select": "^16.
|
|
57
|
+
"@atlaskit/select": "^16.5.0",
|
|
58
58
|
"@atlaskit/ssr": "*",
|
|
59
59
|
"@atlaskit/visual-regression": "*",
|
|
60
60
|
"@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
|