@carbon/ibm-products 1.67.0 → 1.69.0
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +2 -2
- 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 +2 -2
- 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 +2 -2
- 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 +2 -2
- 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/useNestedRows.js +50 -33
- package/es/components/Datagrid/useOnRowClick.js +1 -1
- package/es/components/index.js +2 -1
- package/es/global/js/package-settings.js +1 -0
- package/lib/components/Datagrid/useNestedRows.js +50 -33
- package/lib/components/Datagrid/useOnRowClick.js +1 -1
- package/lib/components/index.js +13 -0
- package/lib/global/js/package-settings.js +1 -0
- package/package.json +2 -2
- package/scss/components/Datagrid/styles/_datagrid.scss +3 -2
@@ -1,6 +1,6 @@
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
2
|
/**
|
3
|
-
* Copyright IBM Corp. 2020,
|
3
|
+
* Copyright IBM Corp. 2020, 2024
|
4
4
|
*
|
5
5
|
* This source code is licensed under the Apache-2.0 license found in the
|
6
6
|
* LICENSE file in the root directory of this source tree.
|
@@ -9,46 +9,63 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
9
9
|
import { pkg } from '../../settings';
|
10
10
|
import cx from 'classnames';
|
11
11
|
import useNestedRowExpander from './useNestedRowExpander';
|
12
|
+
import { useEffect } from 'react';
|
12
13
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
13
14
|
var useNestedRows = function useNestedRows(hooks) {
|
14
15
|
useNestedRowExpander(hooks);
|
15
|
-
var marginLeft = 24;
|
16
|
-
var getRowProps = function getRowProps(props, _ref) {
|
17
|
-
var _cx;
|
18
|
-
var row = _ref.row;
|
19
|
-
return [props, {
|
20
|
-
className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _cx))
|
21
|
-
}];
|
22
|
-
};
|
23
|
-
var getRowStyles = function getRowStyles(props, _ref2) {
|
24
|
-
var row = _ref2.row;
|
25
|
-
return [props, {
|
26
|
-
style: {
|
27
|
-
paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
|
28
|
-
}
|
29
|
-
}];
|
30
|
-
};
|
31
|
-
var getCellProps = function getCellProps(props, _ref3) {
|
32
|
-
var cell = _ref3.cell,
|
33
|
-
instance = _ref3.instance;
|
34
|
-
// reduce the "first cell"s width to compensate added (left) margin
|
35
|
-
var isFirstCell = instance.columns.findIndex(function (c) {
|
36
|
-
return c.id === cell.column.id;
|
37
|
-
}) === 0;
|
38
|
-
return [props, {
|
39
|
-
style: {
|
40
|
-
marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
|
41
|
-
}
|
42
|
-
}];
|
43
|
-
};
|
44
16
|
var useInstance = function useInstance(instance) {
|
17
|
+
// This useEffect will expand rows if they exist in the initialState obj
|
18
|
+
useEffect(function () {
|
19
|
+
var rows = instance.rows,
|
20
|
+
initialState = instance.initialState;
|
21
|
+
var expandedRowIds = initialState.expandedRowIds;
|
22
|
+
if (expandedRowIds) {
|
23
|
+
Object.keys(expandedRowIds).forEach(function (key) {
|
24
|
+
var row = rows.filter(function (r) {
|
25
|
+
return r.id.toString() === key.toString();
|
26
|
+
});
|
27
|
+
if (row.length && key.toString() === row[0].id.toString()) {
|
28
|
+
row[0].toggleRowExpanded();
|
29
|
+
}
|
30
|
+
});
|
31
|
+
}
|
32
|
+
}, [instance]);
|
33
|
+
var marginLeft = 24;
|
34
|
+
var getRowProps = function getRowProps(props, _ref) {
|
35
|
+
var _cx;
|
36
|
+
var row = _ref.row;
|
37
|
+
return [props, {
|
38
|
+
className: cx((_cx = {}, _defineProperty(_cx, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), _defineProperty(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _cx))
|
39
|
+
}];
|
40
|
+
};
|
41
|
+
var getRowStyles = function getRowStyles(props, _ref2) {
|
42
|
+
var row = _ref2.row;
|
43
|
+
return [props, {
|
44
|
+
style: {
|
45
|
+
paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
|
46
|
+
}
|
47
|
+
}];
|
48
|
+
};
|
49
|
+
var getCellProps = function getCellProps(props, _ref3) {
|
50
|
+
var cell = _ref3.cell,
|
51
|
+
instance = _ref3.instance;
|
52
|
+
// reduce the "first cell"s width to compensate added (left) margin
|
53
|
+
var isFirstCell = instance.columns.findIndex(function (c) {
|
54
|
+
return c.id === cell.column.id;
|
55
|
+
}) === 0;
|
56
|
+
return [props, {
|
57
|
+
style: {
|
58
|
+
marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
|
59
|
+
}
|
60
|
+
}];
|
61
|
+
};
|
45
62
|
Object.assign(instance, {
|
46
63
|
withNestedRows: true
|
47
64
|
});
|
65
|
+
hooks.getRowProps.push(getRowProps);
|
66
|
+
hooks.getRowProps.push(getRowStyles);
|
67
|
+
hooks.getCellProps.push(getCellProps);
|
48
68
|
};
|
49
|
-
hooks.getRowProps.push(getRowProps);
|
50
|
-
hooks.getRowProps.push(getRowStyles);
|
51
|
-
hooks.getCellProps.push(getCellProps);
|
52
69
|
hooks.useInstance.push(useInstance);
|
53
70
|
};
|
54
71
|
export default useNestedRows;
|
@@ -29,7 +29,7 @@ var useOnRowClick = function useOnRowClick(hooks) {
|
|
29
29
|
row.classList.remove("".concat(carbon.prefix, "--data-table--selected"));
|
30
30
|
});
|
31
31
|
}
|
32
|
-
var closestRow = event.target.closest(
|
32
|
+
var closestRow = event.target.closest('tr');
|
33
33
|
closestRow.classList.add("".concat(carbon.prefix, "--data-table--selected"));
|
34
34
|
if (!withSelectRows) {
|
35
35
|
instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {
|
package/es/components/index.js
CHANGED
@@ -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.
|
@@ -7,6 +7,7 @@
|
|
7
7
|
|
8
8
|
export { AboutModal } from './AboutModal';
|
9
9
|
export { APIKeyModal } from './APIKeyModal';
|
10
|
+
export { ButtonMenu, ButtonMenuItem } from './ButtonMenu';
|
10
11
|
export { Cascade } from './Cascade';
|
11
12
|
export { ComboButton, ComboButtonItem } from './ComboButton';
|
12
13
|
export { CreateFullPage, CreateFullPageStep } from './CreateFullPage';
|
@@ -9,8 +9,9 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
9
9
|
var _settings = require("../../settings");
|
10
10
|
var _classnames = _interopRequireDefault(require("classnames"));
|
11
11
|
var _useNestedRowExpander = _interopRequireDefault(require("./useNestedRowExpander"));
|
12
|
+
var _react = require("react");
|
12
13
|
/**
|
13
|
-
* Copyright IBM Corp. 2020,
|
14
|
+
* Copyright IBM Corp. 2020, 2024
|
14
15
|
*
|
15
16
|
* This source code is licensed under the Apache-2.0 license found in the
|
16
17
|
* LICENSE file in the root directory of this source tree.
|
@@ -19,43 +20,59 @@ var _useNestedRowExpander = _interopRequireDefault(require("./useNestedRowExpand
|
|
19
20
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
20
21
|
var useNestedRows = function useNestedRows(hooks) {
|
21
22
|
(0, _useNestedRowExpander.default)(hooks);
|
22
|
-
var marginLeft = 24;
|
23
|
-
var getRowProps = function getRowProps(props, _ref) {
|
24
|
-
var _cx;
|
25
|
-
var row = _ref.row;
|
26
|
-
return [props, {
|
27
|
-
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _cx))
|
28
|
-
}];
|
29
|
-
};
|
30
|
-
var getRowStyles = function getRowStyles(props, _ref2) {
|
31
|
-
var row = _ref2.row;
|
32
|
-
return [props, {
|
33
|
-
style: {
|
34
|
-
paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
|
35
|
-
}
|
36
|
-
}];
|
37
|
-
};
|
38
|
-
var getCellProps = function getCellProps(props, _ref3) {
|
39
|
-
var cell = _ref3.cell,
|
40
|
-
instance = _ref3.instance;
|
41
|
-
// reduce the "first cell"s width to compensate added (left) margin
|
42
|
-
var isFirstCell = instance.columns.findIndex(function (c) {
|
43
|
-
return c.id === cell.column.id;
|
44
|
-
}) === 0;
|
45
|
-
return [props, {
|
46
|
-
style: {
|
47
|
-
marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
|
48
|
-
}
|
49
|
-
}];
|
50
|
-
};
|
51
23
|
var useInstance = function useInstance(instance) {
|
24
|
+
// This useEffect will expand rows if they exist in the initialState obj
|
25
|
+
(0, _react.useEffect)(function () {
|
26
|
+
var rows = instance.rows,
|
27
|
+
initialState = instance.initialState;
|
28
|
+
var expandedRowIds = initialState.expandedRowIds;
|
29
|
+
if (expandedRowIds) {
|
30
|
+
Object.keys(expandedRowIds).forEach(function (key) {
|
31
|
+
var row = rows.filter(function (r) {
|
32
|
+
return r.id.toString() === key.toString();
|
33
|
+
});
|
34
|
+
if (row.length && key.toString() === row[0].id.toString()) {
|
35
|
+
row[0].toggleRowExpanded();
|
36
|
+
}
|
37
|
+
});
|
38
|
+
}
|
39
|
+
}, [instance]);
|
40
|
+
var marginLeft = 24;
|
41
|
+
var getRowProps = function getRowProps(props, _ref) {
|
42
|
+
var _cx;
|
43
|
+
var row = _ref.row;
|
44
|
+
return [props, {
|
45
|
+
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-nested-row"), row.depth > 0), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__carbon-row-expanded"), row.isExpanded), _cx))
|
46
|
+
}];
|
47
|
+
};
|
48
|
+
var getRowStyles = function getRowStyles(props, _ref2) {
|
49
|
+
var row = _ref2.row;
|
50
|
+
return [props, {
|
51
|
+
style: {
|
52
|
+
paddingLeft: "".concat(row.depth > 1 ? marginLeft * 2 + (row.depth - 1) * (marginLeft + marginLeft / 3) : row.depth === 1 ? marginLeft * 2 : 0, "px")
|
53
|
+
}
|
54
|
+
}];
|
55
|
+
};
|
56
|
+
var getCellProps = function getCellProps(props, _ref3) {
|
57
|
+
var cell = _ref3.cell,
|
58
|
+
instance = _ref3.instance;
|
59
|
+
// reduce the "first cell"s width to compensate added (left) margin
|
60
|
+
var isFirstCell = instance.columns.findIndex(function (c) {
|
61
|
+
return c.id === cell.column.id;
|
62
|
+
}) === 0;
|
63
|
+
return [props, {
|
64
|
+
style: {
|
65
|
+
marginRight: "".concat(isFirstCell && cell.row.depth > 0 ? "".concat(-32 * cell.row.depth - 18, "px") : '')
|
66
|
+
}
|
67
|
+
}];
|
68
|
+
};
|
52
69
|
Object.assign(instance, {
|
53
70
|
withNestedRows: true
|
54
71
|
});
|
72
|
+
hooks.getRowProps.push(getRowProps);
|
73
|
+
hooks.getRowProps.push(getRowStyles);
|
74
|
+
hooks.getCellProps.push(getCellProps);
|
55
75
|
};
|
56
|
-
hooks.getRowProps.push(getRowProps);
|
57
|
-
hooks.getRowProps.push(getRowStyles);
|
58
|
-
hooks.getCellProps.push(getCellProps);
|
59
76
|
hooks.useInstance.push(useInstance);
|
60
77
|
};
|
61
78
|
var _default = useNestedRows;
|
@@ -35,7 +35,7 @@ var useOnRowClick = function useOnRowClick(hooks) {
|
|
35
35
|
row.classList.remove("".concat(_settings.carbon.prefix, "--data-table--selected"));
|
36
36
|
});
|
37
37
|
}
|
38
|
-
var closestRow = event.target.closest(
|
38
|
+
var closestRow = event.target.closest('tr');
|
39
39
|
closestRow.classList.add("".concat(_settings.carbon.prefix, "--data-table--selected"));
|
40
40
|
if (!withSelectRows) {
|
41
41
|
instance.selectedFlatRows && instance.selectedFlatRows.map(function (toggleRow) {
|
package/lib/components/index.js
CHANGED
@@ -15,6 +15,18 @@ Object.defineProperty(exports, "AboutModal", {
|
|
15
15
|
return _AboutModal.AboutModal;
|
16
16
|
}
|
17
17
|
});
|
18
|
+
Object.defineProperty(exports, "ButtonMenu", {
|
19
|
+
enumerable: true,
|
20
|
+
get: function get() {
|
21
|
+
return _ButtonMenu.ButtonMenu;
|
22
|
+
}
|
23
|
+
});
|
24
|
+
Object.defineProperty(exports, "ButtonMenuItem", {
|
25
|
+
enumerable: true,
|
26
|
+
get: function get() {
|
27
|
+
return _ButtonMenu.ButtonMenuItem;
|
28
|
+
}
|
29
|
+
});
|
18
30
|
Object.defineProperty(exports, "Cascade", {
|
19
31
|
enumerable: true,
|
20
32
|
get: function get() {
|
@@ -587,6 +599,7 @@ Object.defineProperty(exports, "useWebTerminal", {
|
|
587
599
|
});
|
588
600
|
var _AboutModal = require("./AboutModal");
|
589
601
|
var _APIKeyModal = require("./APIKeyModal");
|
602
|
+
var _ButtonMenu = require("./ButtonMenu");
|
590
603
|
var _Cascade = require("./Cascade");
|
591
604
|
var _ComboButton = require("./ComboButton");
|
592
605
|
var _CreateFullPage = require("./CreateFullPage");
|
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.
|
4
|
+
"version": "1.69.0",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -97,5 +97,5 @@
|
|
97
97
|
"react": "^16.8.6 || ^17.0.1",
|
98
98
|
"react-dom": "^16.8.6 || ^17.0.1"
|
99
99
|
},
|
100
|
-
"gitHead": "
|
100
|
+
"gitHead": "f807098a8d962f26dbfafaa33d53a68fef94c7a1"
|
101
101
|
}
|
@@ -542,13 +542,14 @@
|
|
542
542
|
}
|
543
543
|
|
544
544
|
.#{$block-class}
|
545
|
-
.#{$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)
|
545
|
+
.#{$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)
|
546
|
+
td:first-child {
|
546
547
|
position: relative;
|
547
548
|
}
|
548
549
|
|
549
550
|
.#{$block-class}
|
550
551
|
.#{$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)
|
551
|
-
:first-child:not(.#{$carbon-prefix}--checkbox--inline)::before {
|
552
|
+
td:first-child:not(.#{$carbon-prefix}--checkbox--inline)::before {
|
552
553
|
position: absolute;
|
553
554
|
top: 0;
|
554
555
|
left: 0;
|