@carbon/ibm-products 1.72.0 → 1.72.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +47 -1
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +1 -1
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +47 -1
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +1 -1
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +47 -1
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +1 -1
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +47 -1
- package/css/index.css.map +1 -1
- package/css/index.min.css +1 -1
- package/css/index.min.css.map +1 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +4 -4
- package/es/components/Datagrid/Datagrid/DatagridRow.js +6 -5
- package/es/components/Datagrid/Datagrid/addons/stateReducer.js +8 -1
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +1 -1
- package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +4 -4
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +6 -5
- package/lib/components/Datagrid/Datagrid/addons/stateReducer.js +8 -1
- package/package.json +2 -2
- package/scss/components/Datagrid/styles/_useExpandedRow.scss +25 -0
- package/scss/components/Datagrid/styles/_useNestedRows.scss +62 -1
@@ -1,5 +1,5 @@
|
|
1
1
|
/**
|
2
|
-
* Copyright IBM Corp. 2020,
|
2
|
+
* Copyright IBM Corp. 2020, 2024
|
3
3
|
*
|
4
4
|
* This source code is licensed under the Apache-2.0 license found in the
|
5
5
|
* LICENSE file in the root directory of this source tree.
|
@@ -15,10 +15,10 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
|
|
15
15
|
var row = datagridState.row;
|
16
16
|
var expandedContentHeight = row.expandedContentHeight;
|
17
17
|
var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
|
18
|
-
var _event$target
|
18
|
+
var _event$target;
|
19
19
|
/* istanbul ignore else */
|
20
|
-
if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 &&
|
21
|
-
var parentNode = event.target.
|
20
|
+
if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && _event$target.closest('tr').previousElementSibling) {
|
21
|
+
var parentNode = event.target.closest('tr').previousElementSibling;
|
22
22
|
if (eventType === 'enter') {
|
23
23
|
parentNode.classList.add("".concat(blockClass, "__expandable-row--hover"));
|
24
24
|
} else {
|
@@ -99,6 +99,8 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
99
99
|
hoverHandler(event);
|
100
100
|
}
|
101
101
|
};
|
102
|
+
var _row$getRowProps = row.getRowProps(),
|
103
|
+
className = _row$getRowProps.className;
|
102
104
|
var rowClassNames = cx("".concat(blockClass, "__carbon-row"), (_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), _defineProperty(_cx, "".concat(carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
|
103
105
|
var setAdditionalRowProps = function setAdditionalRowProps() {
|
104
106
|
if (withNestedRows || withExpandedRows) {
|
@@ -110,11 +112,10 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
110
112
|
};
|
111
113
|
return /*#__PURE__*/React.createElement(React.Fragment, {
|
112
114
|
key: key
|
113
|
-
}, /*#__PURE__*/React.createElement(TableRow, _extends({
|
114
|
-
className: rowClassNames
|
115
|
-
}, row.getRowProps({
|
115
|
+
}, /*#__PURE__*/React.createElement(TableRow, _extends({}, row.getRowProps({
|
116
116
|
role: undefined
|
117
117
|
}), {
|
118
|
+
className: cx(rowClassNames, className),
|
118
119
|
key: row.id,
|
119
120
|
onMouseEnter: hoverHandler,
|
120
121
|
onMouseLeave: handleMouseLeave,
|
@@ -122,7 +123,7 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
122
123
|
onBlur: focusRemover,
|
123
124
|
onKeyUp: handleOnKeyUp
|
124
125
|
}, setAdditionalRowProps()), row.cells.map(function (cell, index) {
|
125
|
-
var _cell$column;
|
126
|
+
var _cell$column, _cx2;
|
126
127
|
var cellProps = cell.getCellProps({
|
127
128
|
role: undefined
|
128
129
|
});
|
@@ -136,7 +137,7 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
136
137
|
});
|
137
138
|
}
|
138
139
|
return /*#__PURE__*/React.createElement(TableCell, _extends({
|
139
|
-
className: cx("".concat(blockClass, "__cell"),
|
140
|
+
className: cx("".concat(blockClass, "__cell"), (_cx2 = {}, _defineProperty(_cx2, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), _defineProperty(_cx2, "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), _cx2))
|
140
141
|
}, restProps, {
|
141
142
|
key: cell.column.id
|
142
143
|
}), content);
|
@@ -89,13 +89,20 @@ export var stateReducer = function stateReducer(newState, action) {
|
|
89
89
|
getRowId = _ref3.getRowId,
|
90
90
|
indeterminate = _ref3.indeterminate,
|
91
91
|
isChecked = _ref3.isChecked;
|
92
|
+
var newSelectedRowIds = {};
|
92
93
|
if (rows) {
|
93
94
|
var newSelectedRowData = {};
|
94
95
|
rows.forEach(function (row) {
|
96
|
+
var props = row.getRowProps();
|
97
|
+
if (props && props.disabled) {
|
98
|
+
return;
|
99
|
+
}
|
100
|
+
newSelectedRowIds[getRowId(row.original, row.index)] = true;
|
95
101
|
newSelectedRowData[getRowId(row.original, row.index)] = row.original;
|
96
102
|
});
|
97
103
|
return _objectSpread(_objectSpread({}, newState), {}, {
|
98
|
-
selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData
|
104
|
+
selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData,
|
105
|
+
selectedRowIds: newSelectedRowIds
|
99
106
|
});
|
100
107
|
}
|
101
108
|
return _objectSpread({}, newState);
|
@@ -100,7 +100,7 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
100
100
|
var renderTable = function renderTable() {
|
101
101
|
var _getTableProps;
|
102
102
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(Table, (0, _extends2.default)({}, getTableProps(), {
|
103
|
-
className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-is-resizing"), typeof columnResizing.isResizingColumn === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
|
103
|
+
className: (0, _classnames.default)(withVirtualScroll ? '' : "".concat(blockClass, "__table-simple"), "".concat(blockClass, "__vertical-align-").concat(verticalAlign), (0, _defineProperty2.default)({}, "".concat(blockClass, "__variable-row-height"), variableRowHeight), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-with-inline-edit"), withInlineEdit), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-grid-active"), gridActive), (0, _defineProperty2.default)({}, "".concat(blockClass, "__table-is-resizing"), typeof (columnResizing === null || columnResizing === void 0 ? void 0 : columnResizing.isResizingColumn) === 'string'), (_getTableProps = getTableProps()) === null || _getTableProps === void 0 ? void 0 : _getTableProps.className),
|
104
104
|
role: withInlineEdit && 'grid',
|
105
105
|
tabIndex: withInlineEdit && 0,
|
106
106
|
onKeyDown: /* istanbul ignore next */
|
@@ -8,7 +8,7 @@ exports.default = void 0;
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
9
9
|
var _settings = require("../../../settings");
|
10
10
|
/**
|
11
|
-
* Copyright IBM Corp. 2020,
|
11
|
+
* Copyright IBM Corp. 2020, 2024
|
12
12
|
*
|
13
13
|
* This source code is licensed under the Apache-2.0 license found in the
|
14
14
|
* LICENSE file in the root directory of this source tree.
|
@@ -22,10 +22,10 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
|
|
22
22
|
var row = datagridState.row;
|
23
23
|
var expandedContentHeight = row.expandedContentHeight;
|
24
24
|
var toggleParentHoverClass = function toggleParentHoverClass(event, eventType) {
|
25
|
-
var _event$target
|
25
|
+
var _event$target;
|
26
26
|
/* istanbul ignore else */
|
27
|
-
if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 &&
|
28
|
-
var parentNode = event.target.
|
27
|
+
if (event !== null && event !== void 0 && (_event$target = event.target) !== null && _event$target !== void 0 && _event$target.closest('tr').previousElementSibling) {
|
28
|
+
var parentNode = event.target.closest('tr').previousElementSibling;
|
29
29
|
if (eventType === 'enter') {
|
30
30
|
parentNode.classList.add("".concat(blockClass, "__expandable-row--hover"));
|
31
31
|
} else {
|
@@ -99,6 +99,8 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
99
99
|
hoverHandler(event);
|
100
100
|
}
|
101
101
|
};
|
102
|
+
var _row$getRowProps = row.getRowProps(),
|
103
|
+
className = _row$getRowProps.className;
|
102
104
|
var rowClassNames = (0, _classnames.default)("".concat(blockClass, "__carbon-row"), (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expandable"), row.canExpand), (0, _defineProperty2.default)(_cx, "".concat(_settings.carbon.prefix, "--data-table--selected"), row.isSelected), _cx));
|
103
105
|
var setAdditionalRowProps = function setAdditionalRowProps() {
|
104
106
|
if (withNestedRows || withExpandedRows) {
|
@@ -110,11 +112,10 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
110
112
|
};
|
111
113
|
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, {
|
112
114
|
key: key
|
113
|
-
}, /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({
|
114
|
-
className: rowClassNames
|
115
|
-
}, row.getRowProps({
|
115
|
+
}, /*#__PURE__*/_react.default.createElement(TableRow, (0, _extends2.default)({}, row.getRowProps({
|
116
116
|
role: undefined
|
117
117
|
}), {
|
118
|
+
className: (0, _classnames.default)(rowClassNames, className),
|
118
119
|
key: row.id,
|
119
120
|
onMouseEnter: hoverHandler,
|
120
121
|
onMouseLeave: handleMouseLeave,
|
@@ -122,7 +123,7 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
122
123
|
onBlur: focusRemover,
|
123
124
|
onKeyUp: handleOnKeyUp
|
124
125
|
}, setAdditionalRowProps()), row.cells.map(function (cell, index) {
|
125
|
-
var _cell$column;
|
126
|
+
var _cell$column, _cx2;
|
126
127
|
var cellProps = cell.getCellProps({
|
127
128
|
role: undefined
|
128
129
|
});
|
@@ -136,7 +137,7 @@ var DatagridRow = function DatagridRow(datagridState) {
|
|
136
137
|
});
|
137
138
|
}
|
138
139
|
return /*#__PURE__*/_react.default.createElement(TableCell, (0, _extends2.default)({
|
139
|
-
className: (0, _classnames.default)("".concat(blockClass, "__cell"), (0, _defineProperty2.default)(
|
140
|
+
className: (0, _classnames.default)("".concat(blockClass, "__cell"), (_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__expandable-row-cell"), row.canExpand && index === 0), (0, _defineProperty2.default)(_cx2, "".concat(blockClass, "__expandable-row-cell--is-expanded"), row.isExpanded && index === 0), _cx2))
|
140
141
|
}, restProps, {
|
141
142
|
key: cell.column.id
|
142
143
|
}), content);
|
@@ -93,13 +93,20 @@ var stateReducer = function stateReducer(newState, action) {
|
|
93
93
|
getRowId = _ref3.getRowId,
|
94
94
|
indeterminate = _ref3.indeterminate,
|
95
95
|
isChecked = _ref3.isChecked;
|
96
|
+
var newSelectedRowIds = {};
|
96
97
|
if (rows) {
|
97
98
|
var newSelectedRowData = {};
|
98
99
|
rows.forEach(function (row) {
|
100
|
+
var props = row.getRowProps();
|
101
|
+
if (props && props.disabled) {
|
102
|
+
return;
|
103
|
+
}
|
104
|
+
newSelectedRowIds[getRowId(row.original, row.index)] = true;
|
99
105
|
newSelectedRowData[getRowId(row.original, row.index)] = row.original;
|
100
106
|
});
|
101
107
|
return _objectSpread(_objectSpread({}, newState), {}, {
|
102
|
-
selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData
|
108
|
+
selectedRowData: indeterminate || !isChecked ? {} : newSelectedRowData,
|
109
|
+
selectedRowIds: newSelectedRowIds
|
103
110
|
});
|
104
111
|
}
|
105
112
|
return _objectSpread({}, newState);
|
package/package.json
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
{
|
2
2
|
"name": "@carbon/ibm-products",
|
3
3
|
"description": "Carbon for IBM Products",
|
4
|
-
"version": "1.72.
|
4
|
+
"version": "1.72.1",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -98,5 +98,5 @@
|
|
98
98
|
"react": "^16.8.6 || ^17.0.1",
|
99
99
|
"react-dom": "^16.8.6 || ^17.0.1"
|
100
100
|
},
|
101
|
-
"gitHead": "
|
101
|
+
"gitHead": "4a4bf2a1dd6f15a09871cf84f634cd5cff095194"
|
102
102
|
}
|
@@ -61,9 +61,17 @@
|
|
61
61
|
+ .#{$block-class}__expanded-row,
|
62
62
|
.#{$block-class} .#{$block-class}__expanded-row:hover,
|
63
63
|
.#{$block-class} .#{$block-class}__expandable-row--hover td {
|
64
|
+
border-top: none;
|
64
65
|
background: $layer-hover;
|
65
66
|
}
|
66
67
|
|
68
|
+
.#{$block-class}
|
69
|
+
.#{$carbon-prefix}--data-table
|
70
|
+
.#{$block-class}__carbon-row-expandable
|
71
|
+
td {
|
72
|
+
border-top: none;
|
73
|
+
}
|
74
|
+
|
67
75
|
.#{$block-class}
|
68
76
|
.#{$carbon-prefix}--data-table
|
69
77
|
tbody
|
@@ -79,6 +87,23 @@
|
|
79
87
|
border: none;
|
80
88
|
}
|
81
89
|
|
90
|
+
.#{$block-class}
|
91
|
+
.#{$carbon-prefix}--data-table
|
92
|
+
.#{$block-class}__carbon-row-expanded:hover
|
93
|
+
td:not(.#{$block-class}__expandable-row-cell) {
|
94
|
+
border-bottom: 1px solid $border-subtle;
|
95
|
+
}
|
96
|
+
|
97
|
+
.#{$block-class}
|
98
|
+
.#{$carbon-prefix}--data-table
|
99
|
+
.#{$block-class}__carbon-row-expanded:hover
|
100
|
+
+ .#{$block-class}__expanded-row
|
101
|
+
.#{$block-class}__expanded-row-content,
|
102
|
+
.#{$block-class}__expanded-row:hover .#{$block-class}__expanded-row-content {
|
103
|
+
background-color: $layer-hover;
|
104
|
+
transition: background-color $duration--fast-01 motion(entrance, productive);
|
105
|
+
}
|
106
|
+
|
82
107
|
.#{$block-class}
|
83
108
|
.#{$carbon-prefix}--data-table
|
84
109
|
td.#{$block-class}__expanded-row-cell-wrapper {
|
@@ -30,7 +30,10 @@
|
|
30
30
|
border-bottom: none;
|
31
31
|
}
|
32
32
|
|
33
|
-
.#{$block-class} .#{$block-class}__carbon-row-expandable
|
33
|
+
.#{$block-class} .#{$block-class}__carbon-row-expandable,
|
34
|
+
.#{$block-class}
|
35
|
+
tr.#{$block-class}__carbon-nested-row
|
36
|
+
td.#{$block-class}__cell:not(.#{$block-class}__expandable-row-cell) {
|
34
37
|
position: relative;
|
35
38
|
}
|
36
39
|
|
@@ -58,6 +61,64 @@
|
|
58
61
|
padding-left: $spacing-03;
|
59
62
|
}
|
60
63
|
|
64
|
+
.#{$carbon-prefix}--data-table td.#{$block-class}__expandable-row-cell + td,
|
65
|
+
.#{$carbon-prefix}--data-table
|
66
|
+
.#{$block-class}__carbon-nested-row:not(
|
67
|
+
.#{$block-class}__carbon-row-expandable
|
68
|
+
)
|
69
|
+
td.#{$block-class}__cell:nth-of-type(2) {
|
70
|
+
position: relative;
|
71
|
+
}
|
72
|
+
|
73
|
+
.#{$carbon-prefix}--data-table
|
74
|
+
td.#{$block-class}__expandable-row-cell.#{$block-class}__expandable-row-cell--is-expanded
|
75
|
+
+ td.#{$block-class}__checkbox-cell__checkbox-cell {
|
76
|
+
border-top: none;
|
77
|
+
}
|
78
|
+
|
79
|
+
.#{$carbon-prefix}--data-table
|
80
|
+
td.#{$block-class}__expandable-row-cell.#{$block-class}__expandable-row-cell--is-expanded
|
81
|
+
+ td::before,
|
82
|
+
.#{$carbon-prefix}--data-table
|
83
|
+
.#{$block-class}__carbon-nested-row:not(
|
84
|
+
.#{$block-class}__carbon-row-expandable
|
85
|
+
)
|
86
|
+
td.#{$block-class}__cell:nth-of-type(2)::before,
|
87
|
+
.#{$carbon-prefix}--data-table
|
88
|
+
.#{$block-class}__carbon-nested-row
|
89
|
+
td.#{$block-class}__expandable-row-cell
|
90
|
+
+ td::before {
|
91
|
+
position: absolute;
|
92
|
+
/* stylelint-disable-next-line carbon/layout-token-use */
|
93
|
+
bottom: -1px;
|
94
|
+
left: 0;
|
95
|
+
width: 1rem;
|
96
|
+
height: 1px;
|
97
|
+
background-color: $ui-01;
|
98
|
+
content: '';
|
99
|
+
transition: background-color $duration--fast-01 motion(entrance, productive);
|
100
|
+
}
|
101
|
+
|
102
|
+
.#{$carbon-prefix}--data-table
|
103
|
+
tr:hover
|
104
|
+
td.#{$block-class}__expandable-row-cell.#{$block-class}__expandable-row-cell--is-expanded
|
105
|
+
+ td::before,
|
106
|
+
.#{$carbon-prefix}--data-table
|
107
|
+
.#{$block-class}__carbon-nested-row:hover
|
108
|
+
td.#{$block-class}__expandable-row-cell
|
109
|
+
+ td::before,
|
110
|
+
.#{$carbon-prefix}--data-table
|
111
|
+
.#{$block-class}__expandable-row--hover
|
112
|
+
td.#{$block-class}__expandable-row-cell
|
113
|
+
+ td::before,
|
114
|
+
.#{$carbon-prefix}--data-table
|
115
|
+
.#{$block-class}__carbon-nested-row:hover:not(
|
116
|
+
.#{$block-class}__carbon-row-expandable
|
117
|
+
)
|
118
|
+
td.#{$block-class}__cell:nth-of-type(2)::before {
|
119
|
+
background-color: $layer-hover;
|
120
|
+
}
|
121
|
+
|
61
122
|
.#{$block-class}__carbon-row-expanded {
|
62
123
|
.#{$block-class}__expandable-row-cell {
|
63
124
|
border-bottom: none;
|