@carbon/ibm-products 2.0.0-rc.21 → 2.0.0-rc.23
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/css/index-full-carbon.css +4849 -2937
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +4 -4
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +61 -43
- package/css/index-without-carbon-released-only.css.map +1 -1
- package/css/index-without-carbon-released-only.min.css +3 -3
- package/css/index-without-carbon-released-only.min.css.map +1 -1
- package/css/index-without-carbon.css +117 -73
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +4 -4
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +342 -106
- package/css/index.css.map +1 -1
- package/css/index.min.css +4 -4
- package/css/index.min.css.map +1 -1
- package/es/components/Card/CardFooter.js +2 -2
- package/es/components/Datagrid/Datagrid/DatagridRow.js +42 -11
- package/es/components/Datagrid/Datagrid/DatagridSelectAll.js +20 -4
- package/es/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +18 -2
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +4 -2
- package/es/components/Datagrid/useActionsColumn.js +29 -1
- package/es/components/Datagrid/useDefaultStringRenderer.js +1 -1
- package/es/components/Datagrid/useNestedRows.js +2 -4
- package/es/components/Datagrid/useSelectAllToggle.js +18 -2
- package/es/components/Datagrid/useSelectRows.js +19 -2
- package/es/components/Datagrid/useStickyColumn.js +22 -5
- package/es/components/PageHeader/PageHeaderTitle.js +1 -0
- package/es/components/SidePanel/SidePanel.js +14 -5
- package/es/components/Tearsheet/TearsheetShell.js +6 -4
- package/lib/components/Card/CardFooter.js +2 -2
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +42 -11
- package/lib/components/Datagrid/Datagrid/DatagridSelectAll.js +27 -3
- package/lib/components/Datagrid/Datagrid/DatagridSelectAllWithToggle.js +17 -1
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +3 -1
- package/lib/components/Datagrid/useActionsColumn.js +30 -1
- package/lib/components/Datagrid/useDefaultStringRenderer.js +1 -1
- package/lib/components/Datagrid/useNestedRows.js +2 -4
- package/lib/components/Datagrid/useSelectAllToggle.js +25 -2
- package/lib/components/Datagrid/useSelectRows.js +26 -2
- package/lib/components/Datagrid/useStickyColumn.js +22 -4
- package/lib/components/PageHeader/PageHeaderTitle.js +1 -0
- package/lib/components/SidePanel/SidePanel.js +14 -5
- package/lib/components/Tearsheet/TearsheetShell.js +4 -2
- package/package.json +8 -8
- package/scss/components/Datagrid/styles/_datagrid.scss +25 -3
- package/scss/components/Datagrid/styles/_useInlineEdit.scss +4 -0
- package/scss/components/Datagrid/styles/_useNestedRows.scss +19 -0
- package/scss/components/Datagrid/styles/_useSelectAllToggle.scss +12 -8
- package/scss/components/Datagrid/styles/_useStickyColumn.scss +3 -3
- package/scss/components/InlineEditV1/_inline-edit-v1.scss +1 -3
- package/scss/components/Tearsheet/_carbon-imports.scss +2 -1
- package/scss/components/Tearsheet/_tearsheet.scss +4 -5
@@ -2,6 +2,8 @@
|
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
4
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
+
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
6
8
|
value: true
|
7
9
|
});
|
@@ -9,7 +11,9 @@ exports.default = void 0;
|
|
9
11
|
|
10
12
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
13
|
|
12
|
-
var
|
14
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
15
|
+
|
16
|
+
var _react = _interopRequireWildcard(require("react"));
|
13
17
|
|
14
18
|
var _classnames = _interopRequireDefault(require("classnames"));
|
15
19
|
|
@@ -19,6 +23,10 @@ var _DatagridSelectAllWithToggle = _interopRequireDefault(require("./Datagrid/Da
|
|
19
23
|
|
20
24
|
var _settings = require("../../settings");
|
21
25
|
|
26
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
27
|
+
|
28
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
29
|
+
|
22
30
|
/*
|
23
31
|
* Licensed Materials - Property of IBM
|
24
32
|
* 5724-Q36
|
@@ -56,6 +64,21 @@ var useSelectAllWithToggleComponent = function useSelectAllWithToggleComponent(h
|
|
56
64
|
};
|
57
65
|
|
58
66
|
var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
|
67
|
+
var _useState = (0, _react.useState)(window.innerWidth),
|
68
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
69
|
+
windowSize = _useState2[0],
|
70
|
+
setWindowSize = _useState2[1];
|
71
|
+
|
72
|
+
(0, _react.useLayoutEffect)(function () {
|
73
|
+
function updateSize() {
|
74
|
+
setWindowSize(window.innerWidth);
|
75
|
+
}
|
76
|
+
|
77
|
+
window.addEventListener('resize', updateSize);
|
78
|
+
return function () {
|
79
|
+
return window.removeEventListener('resize', updateSize);
|
80
|
+
};
|
81
|
+
}, []);
|
59
82
|
hooks.getCellProps.push(function (props, data) {
|
60
83
|
var _columns$;
|
61
84
|
|
@@ -68,7 +91,7 @@ var useAddClassNameToSelectRow = function useAddClassNameToSelectRow(hooks) {
|
|
68
91
|
|
69
92
|
if (column.id === _commonColumnIds.selectionColumnId && DatagridPagination) {
|
70
93
|
return [props, {
|
71
|
-
className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft))
|
94
|
+
className: (0, _classnames.default)("".concat(blockClass, "__select-all-toggle-on"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__select-all-sticky-left"), isFirstColumnStickyLeft && windowSize > 671))
|
72
95
|
}];
|
73
96
|
}
|
74
97
|
|
@@ -2,6 +2,8 @@
|
|
2
2
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
4
|
|
5
|
+
var _typeof = require("@babel/runtime/helpers/typeof");
|
6
|
+
|
5
7
|
Object.defineProperty(exports, "__esModule", {
|
6
8
|
value: true
|
7
9
|
});
|
@@ -11,11 +13,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
11
13
|
|
12
14
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
13
15
|
|
16
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
17
|
+
|
14
18
|
var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
|
15
19
|
|
16
20
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
17
21
|
|
18
|
-
var _react =
|
22
|
+
var _react = _interopRequireWildcard(require("react"));
|
19
23
|
|
20
24
|
var _classnames = _interopRequireDefault(require("classnames"));
|
21
25
|
|
@@ -29,6 +33,10 @@ var _settings = require("../../settings");
|
|
29
33
|
|
30
34
|
var _excluded = ["onChange"];
|
31
35
|
|
36
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
37
|
+
|
38
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
39
|
+
|
32
40
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
33
41
|
|
34
42
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
@@ -93,6 +101,22 @@ var SelectRow = function SelectRow(datagridState) {
|
|
93
101
|
onRadioSelect = datagridState.onRadioSelect,
|
94
102
|
columns = datagridState.columns,
|
95
103
|
withStickyColumn = datagridState.withStickyColumn;
|
104
|
+
|
105
|
+
var _useState = (0, _react.useState)(window.innerWidth),
|
106
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
107
|
+
windowSize = _useState2[0],
|
108
|
+
setWindowSize = _useState2[1];
|
109
|
+
|
110
|
+
(0, _react.useLayoutEffect)(function () {
|
111
|
+
function updateSize() {
|
112
|
+
setWindowSize(window.innerWidth);
|
113
|
+
}
|
114
|
+
|
115
|
+
window.addEventListener('resize', updateSize);
|
116
|
+
return function () {
|
117
|
+
return window.removeEventListener('resize', updateSize);
|
118
|
+
};
|
119
|
+
}, []);
|
96
120
|
var selectDisabled = isFetching || row.getRowProps().selectDisabled;
|
97
121
|
|
98
122
|
var _row$getToggleRowSele = row.getToggleRowSelectedProps(),
|
@@ -118,7 +142,7 @@ var SelectRow = function SelectRow(datagridState) {
|
|
118
142
|
},
|
119
143
|
id: "".concat(tableId, "-").concat(row.index),
|
120
144
|
name: "".concat(tableId, "-").concat(row.index, "-name"),
|
121
|
-
className: (0, _classnames.default)("".concat(blockClass, "__checkbox-cell"), cellProps.className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft)),
|
145
|
+
className: (0, _classnames.default)("".concat(blockClass, "__checkbox-cell"), cellProps.className, (0, _defineProperty2.default)({}, "".concat(blockClass, "__checkbox-cell-sticky-left"), isFirstColumnStickyLeft && windowSize > 671)),
|
122
146
|
ariaLabel: "".concat(tableId, "-row-").concat(row.index) // TODO: aria label should be i18n'ed
|
123
147
|
,
|
124
148
|
disabled: selectDisabled
|
@@ -9,6 +9,8 @@ exports.default = void 0;
|
|
9
9
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
11
11
|
|
12
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
13
|
+
|
12
14
|
var _react = require("react");
|
13
15
|
|
14
16
|
var _debounce = _interopRequireDefault(require("lodash/debounce"));
|
@@ -29,8 +31,24 @@ var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
|
|
29
31
|
var useStickyColumn = function useStickyColumn(hooks) {
|
30
32
|
var tableBodyRef = (0, _react.useRef)();
|
31
33
|
var stickyHeaderCellRef = (0, _react.useRef)();
|
32
|
-
|
33
|
-
|
34
|
+
|
35
|
+
var _useState = (0, _react.useState)(window.innerWidth),
|
36
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
37
|
+
windowSize = _useState2[0],
|
38
|
+
setWindowSize = _useState2[1];
|
39
|
+
|
40
|
+
(0, _react.useLayoutEffect)(function () {
|
41
|
+
function updateSize() {
|
42
|
+
setWindowSize(window.innerWidth);
|
43
|
+
}
|
44
|
+
|
45
|
+
window.addEventListener('resize', updateSize);
|
46
|
+
return function () {
|
47
|
+
return window.removeEventListener('resize', updateSize);
|
48
|
+
};
|
49
|
+
}, []);
|
50
|
+
hooks.getCellProps.push(changeProps.bind(null, 'cell', null, windowSize));
|
51
|
+
hooks.getHeaderProps.push(changeProps.bind(null, 'header', stickyHeaderCellRef, windowSize));
|
34
52
|
hooks.getTableBodyProps.push(addTableBodyProps.bind(null, tableBodyRef));
|
35
53
|
hooks.getHeaderGroupProps.push(function (props) {
|
36
54
|
return [props, {
|
@@ -138,7 +156,7 @@ var addTableBodyProps = function addTableBodyProps(tableBodyRef, props) {
|
|
138
156
|
}];
|
139
157
|
};
|
140
158
|
|
141
|
-
var changeProps = function changeProps(elementName, headerCellRef, props, data) {
|
159
|
+
var changeProps = function changeProps(elementName, headerCellRef, windowSize, props, data) {
|
142
160
|
var column = data.column || data.cell.column;
|
143
161
|
|
144
162
|
if (column.sticky === 'right') {
|
@@ -155,7 +173,7 @@ var changeProps = function changeProps(elementName, headerCellRef, props, data)
|
|
155
173
|
var _data$instance, _cx2;
|
156
174
|
|
157
175
|
return [props, _objectSpread({
|
158
|
-
className: (0, _classnames.default)((_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true), (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), data === null || data === void 0 ? void 0 : (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows), _cx2))
|
176
|
+
className: (0, _classnames.default)((_cx2 = {}, (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName), true && windowSize > 671), (0, _defineProperty2.default)(_cx2, "".concat(leftStickyStyleClassPrefix, "-").concat(elementName, "--with-extra-select-column"), (data === null || data === void 0 ? void 0 : (_data$instance = data.instance) === null || _data$instance === void 0 ? void 0 : _data$instance.withSelectRows) && windowSize > 671), _cx2))
|
159
177
|
}, headerCellRef && {
|
160
178
|
ref: headerCellRef
|
161
179
|
})];
|
@@ -64,6 +64,7 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
|
|
64
64
|
}) : null, loading ? /*#__PURE__*/_react.default.createElement(_react2.SkeletonText, {
|
65
65
|
className: "".concat(blockClass, "__title-skeleton")
|
66
66
|
}) : isEditable ? /*#__PURE__*/_react.default.createElement(_.InlineEdit, (0, _extends2.default)({
|
67
|
+
v1: true,
|
67
68
|
hideLabel: true,
|
68
69
|
value: text,
|
69
70
|
editDescription: editDescription,
|
@@ -50,7 +50,7 @@ var _ActionSet = require("../ActionSet");
|
|
50
50
|
var _variants = require("./motion/variants");
|
51
51
|
|
52
52
|
var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "subtitle", "title"],
|
53
|
-
_excluded2 = ["label", "kind", "icon", "leading", "disabled", "className", "onClick"];
|
53
|
+
_excluded2 = ["label", "kind", "icon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
|
54
54
|
|
55
55
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
56
56
|
|
@@ -459,6 +459,8 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
459
459
|
var label = _ref5.label,
|
460
460
|
kind = _ref5.kind,
|
461
461
|
icon = _ref5.icon,
|
462
|
+
tooltipPosition = _ref5.tooltipPosition,
|
463
|
+
tooltipAlignment = _ref5.tooltipAlignment,
|
462
464
|
leading = _ref5.leading,
|
463
465
|
disabled = _ref5.disabled,
|
464
466
|
className = _ref5.className,
|
@@ -470,8 +472,8 @@ var SidePanel = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
470
472
|
size: "sm",
|
471
473
|
renderIcon: icon,
|
472
474
|
iconDescription: label,
|
473
|
-
tooltipPosition:
|
474
|
-
tooltipAlignment:
|
475
|
+
tooltipPosition: tooltipPosition || 'bottom',
|
476
|
+
tooltipAlignment: tooltipAlignment || 'center',
|
475
477
|
hasIconOnly: !leading,
|
476
478
|
disabled: disabled,
|
477
479
|
className: (0, _classnames.default)(["".concat(blockClass, "__action-toolbar-button"), className, (_ref6 = {}, (0, _defineProperty2.default)(_ref6, "".concat(blockClass, "__action-toolbar-icon-only-button"), icon && !leading), (0, _defineProperty2.default)(_ref6, "".concat(blockClass, "__action-toolbar-leading-button"), leading), _ref6)]),
|
@@ -555,14 +557,19 @@ SidePanel.propTypes = {
|
|
555
557
|
leading: _propTypes.default.bool,
|
556
558
|
icon: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.func]),
|
557
559
|
onClick: _propTypes.default.func,
|
558
|
-
kind: _propTypes.default.oneOf(['ghost', 'tertiary', 'secondary', 'primary'])
|
560
|
+
kind: _propTypes.default.oneOf(['ghost', 'tertiary', 'secondary', 'primary']),
|
561
|
+
tooltipAlignment: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
|
562
|
+
tooltipPosition: _propTypes.default.oneOf(['start', 'center', 'end'])
|
559
563
|
})),
|
560
564
|
|
561
565
|
/**
|
562
566
|
* The primary actions to be shown in the side panel. Each action is
|
563
567
|
* specified as an object with optional fields: 'label' to supply the button
|
564
568
|
* label, 'kind' to select the button kind (must be 'primary', 'secondary' or
|
565
|
-
* 'ghost'), '
|
569
|
+
* 'ghost'), 'tooltipPosition' to select where the tooltip is placed around
|
570
|
+
* the button (must be 'top', 'right', 'bottom', or 'left'), 'tooltipAlignment'
|
571
|
+
* to select how the tooltip is aligned with the button (must be 'start',
|
572
|
+
* 'center', or 'end', 'loading' to display a loading indicator, and 'onClick' to
|
566
573
|
* receive notifications when the button is clicked. Additional fields in the
|
567
574
|
* object will be passed to the Button component, and these can include
|
568
575
|
* 'disabled', 'ref', 'className', and any other Button props. Any other
|
@@ -573,6 +580,8 @@ SidePanel.propTypes = {
|
|
573
580
|
*/
|
574
581
|
actions: (0, _propsHelper.allPropTypes)([_ActionSet.ActionSet.validateActions(), _propTypes.default.arrayOf(_propTypes.default.shape(_objectSpread(_objectSpread({}, _react2.Button.propTypes), {}, {
|
575
582
|
kind: _propTypes.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
|
583
|
+
tooltipPosition: _propTypes.default.oneOf(['top', 'right', 'bottom', 'left']),
|
584
|
+
tooltipAlignment: _propTypes.default.oneOf(['start', 'center', 'end']),
|
576
585
|
label: _propTypes.default.string,
|
577
586
|
loading: _propTypes.default.bool,
|
578
587
|
// we duplicate this Button prop to improve the DocGen here
|
@@ -267,11 +267,13 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
267
267
|
}, influencer), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
|
268
268
|
className: "".concat(bc, "__right")
|
269
269
|
}, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
|
270
|
+
className: "".concat(bc, "__main"),
|
270
271
|
alwaysRender: includeActions,
|
271
|
-
|
272
|
+
element: _react2.Layer
|
272
273
|
}, /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
|
274
|
+
className: "".concat(bc, "__content"),
|
273
275
|
alwaysRender: influencer && influencerPosition === 'right',
|
274
|
-
|
276
|
+
element: _react2.Layer
|
275
277
|
}, children), /*#__PURE__*/_react.default.createElement(_Wrap.Wrap, {
|
276
278
|
className: (0, _classnames.default)((_cx6 = {}, (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer"), true), (0, _defineProperty2.default)(_cx6, "".concat(bc, "__influencer--wide"), influencerWidth === 'wide'), _cx6)),
|
277
279
|
neverRender: influencerPosition !== 'right'
|
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": "2.0.0-rc.
|
4
|
+
"version": "2.0.0-rc.23",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -85,14 +85,14 @@
|
|
85
85
|
"react-window": "^1.8.7"
|
86
86
|
},
|
87
87
|
"peerDependencies": {
|
88
|
-
"@carbon/grid": "^11.
|
89
|
-
"@carbon/layout": "^11.
|
90
|
-
"@carbon/motion": "^11.
|
91
|
-
"@carbon/react": "
|
92
|
-
"@carbon/themes": "^11.
|
93
|
-
"@carbon/type": "^11.
|
88
|
+
"@carbon/grid": "^11.12.0",
|
89
|
+
"@carbon/layout": "^11.12.0",
|
90
|
+
"@carbon/motion": "^11.10.0",
|
91
|
+
"@carbon/react": "~1.15.0",
|
92
|
+
"@carbon/themes": "^11.17.0",
|
93
|
+
"@carbon/type": "^11.16.0",
|
94
94
|
"react": "^16.8.6 || ^17.0.1",
|
95
95
|
"react-dom": "^16.8.6 || ^17.0.1"
|
96
96
|
},
|
97
|
-
"gitHead": "
|
97
|
+
"gitHead": "9c7b2779466691e363e1c111f7049aa52623aba9"
|
98
98
|
}
|
@@ -39,6 +39,7 @@
|
|
39
39
|
align-items: center;
|
40
40
|
color: $text-primary;
|
41
41
|
}
|
42
|
+
|
42
43
|
.#{$block-class}__head-select-all.#{$block-class}__checkbox-cell.#{$block-class}__checkbox-cell-sticky-left {
|
43
44
|
position: sticky;
|
44
45
|
z-index: 1;
|
@@ -62,6 +63,7 @@
|
|
62
63
|
align-items: center;
|
63
64
|
padding-top: 0;
|
64
65
|
}
|
66
|
+
|
65
67
|
&.#{$block-class}__checkbox-cell-sticky-left {
|
66
68
|
position: sticky;
|
67
69
|
left: 0;
|
@@ -147,6 +149,7 @@
|
|
147
149
|
}
|
148
150
|
}
|
149
151
|
}
|
152
|
+
|
150
153
|
.#{$block-class}__grid-container::-webkit-scrollbar-thumb {
|
151
154
|
background-color: $text-placeholder;
|
152
155
|
}
|
@@ -155,6 +158,7 @@
|
|
155
158
|
width: 6px;
|
156
159
|
background-color: $background;
|
157
160
|
}
|
161
|
+
|
158
162
|
.#{$block-class}__grid-container {
|
159
163
|
display: block;
|
160
164
|
width: 100%;
|
@@ -247,7 +251,9 @@
|
|
247
251
|
td.#{c4p-settings.$carbon-prefix}--table-column-checkbox,
|
248
252
|
th.#{c4p-settings.$carbon-prefix}--table-column-checkbox {
|
249
253
|
/* stylelint-disable-next-line declaration-no-important */
|
250
|
-
|
254
|
+
width: $spacing-09 !important;
|
255
|
+
/* stylelint-disable-next-line declaration-no-important */
|
256
|
+
padding-right: $spacing-05 !important;
|
251
257
|
}
|
252
258
|
}
|
253
259
|
|
@@ -311,6 +317,7 @@
|
|
311
317
|
|
312
318
|
.#{$block-class}__resizableColumn:hover {
|
313
319
|
background-color: $background-selected-hover;
|
320
|
+
|
314
321
|
.#{$block-class}__resizer {
|
315
322
|
border-right: $spacing-01 solid $border-strong-01;
|
316
323
|
background-color: $background-selected-hover;
|
@@ -318,7 +325,7 @@
|
|
318
325
|
}
|
319
326
|
|
320
327
|
.#{$block-class}__head-hidden-select-all {
|
321
|
-
padding-right: $spacing-
|
328
|
+
padding-right: $spacing-09;
|
322
329
|
&.#{$block-class}__select-all-sticky-left {
|
323
330
|
position: sticky;
|
324
331
|
z-index: 1;
|
@@ -360,6 +367,14 @@
|
|
360
367
|
width: 100% !important;
|
361
368
|
}
|
362
369
|
|
370
|
+
.#{$block-class}__sticky thead {
|
371
|
+
display: flex;
|
372
|
+
|
373
|
+
tr.#{$block-class}__sticky {
|
374
|
+
width: auto;
|
375
|
+
}
|
376
|
+
}
|
377
|
+
|
363
378
|
.#{$block-class}__displayFlex {
|
364
379
|
position: relative;
|
365
380
|
display: flex;
|
@@ -399,6 +414,10 @@
|
|
399
414
|
border-bottom: 1px solid $layer-03;
|
400
415
|
}
|
401
416
|
|
417
|
+
.#{$block-class}__table-container {
|
418
|
+
overflow: hidden;
|
419
|
+
}
|
420
|
+
|
402
421
|
.#{c4p-settings.$pkg-prefix}--datagrid__table-simple {
|
403
422
|
height: 100%;
|
404
423
|
}
|
@@ -415,6 +434,7 @@
|
|
415
434
|
|
416
435
|
.#{$block-class}__carbon-row-expanded {
|
417
436
|
position: relative;
|
437
|
+
|
418
438
|
&.#{$block-class}__carbon-row-expanded-hover-active::before {
|
419
439
|
position: absolute;
|
420
440
|
z-index: 2;
|
@@ -426,7 +446,7 @@
|
|
426
446
|
);
|
427
447
|
width: 1px;
|
428
448
|
height: var(--#{$block-class}--indicator-height);
|
429
|
-
border-left: 1px solid $
|
449
|
+
border-left: 1px solid $border-subtle-selected-01;
|
430
450
|
content: '';
|
431
451
|
}
|
432
452
|
}
|
@@ -478,6 +498,7 @@
|
|
478
498
|
.#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row) {
|
479
499
|
position: relative;
|
480
500
|
}
|
501
|
+
|
481
502
|
.#{$block-class}
|
482
503
|
.#{c4p-settings.$carbon-prefix}--data-table--selected:not(.#{$block-class}__active-row)::before {
|
483
504
|
position: absolute;
|
@@ -522,6 +543,7 @@
|
|
522
543
|
justify-content: center;
|
523
544
|
padding: 0;
|
524
545
|
margin: 0;
|
546
|
+
|
525
547
|
.#{c4p-settings.$carbon-prefix}--btn__icon {
|
526
548
|
margin: 0;
|
527
549
|
}
|
@@ -409,6 +409,10 @@ $row-heights: (
|
|
409
409
|
outline-color: $support-error;
|
410
410
|
}
|
411
411
|
|
412
|
+
.#{variables.$block-class} .#{c4p-settings.$carbon-prefix}--text-input:focus {
|
413
|
+
background: $field-01;
|
414
|
+
}
|
415
|
+
|
412
416
|
.#{variables.$block-class}
|
413
417
|
.#{variables.$block-class}__inline-edit--outer-cell-button--invalid
|
414
418
|
.#{c4p-settings.$carbon-prefix}--number
|
@@ -7,6 +7,7 @@
|
|
7
7
|
*/
|
8
8
|
|
9
9
|
@use '@carbon/styles/scss/theme' as *;
|
10
|
+
@use '@carbon/styles/scss/spacing' as *;
|
10
11
|
@use '../../../global/styles/project-settings' as c4p-settings;
|
11
12
|
@use '@carbon/styles/scss/motion' as *;
|
12
13
|
@use './variables' as *;
|
@@ -50,3 +51,21 @@
|
|
50
51
|
background-color: $border-subtle;
|
51
52
|
content: '';
|
52
53
|
}
|
54
|
+
|
55
|
+
.#{$block-class} tr.#{$block-class}__carbon-nested-row {
|
56
|
+
td:first-child:empty,
|
57
|
+
.#{$block-class}__expandable-row-cell {
|
58
|
+
border-bottom: none;
|
59
|
+
}
|
60
|
+
}
|
61
|
+
|
62
|
+
.#{c4p-settings.$carbon-prefix}--data-table
|
63
|
+
td.#{$block-class}__expandable-row-cell {
|
64
|
+
padding-left: $spacing-03;
|
65
|
+
}
|
66
|
+
|
67
|
+
.#{$block-class}__carbon-row-expanded {
|
68
|
+
.#{$block-class}__expandable-row-cell {
|
69
|
+
border-bottom: none;
|
70
|
+
}
|
71
|
+
}
|
@@ -7,17 +7,21 @@
|
|
7
7
|
*/
|
8
8
|
|
9
9
|
@use '@carbon/styles/scss/spacing' as *;
|
10
|
+
@use '@carbon/styles/scss/theme' as *;
|
10
11
|
@use './variables';
|
11
12
|
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
13
|
+
.#{variables.$block-class}__grid-container {
|
14
|
+
th.#{variables.$block-class}__select-all-toggle-on,
|
15
|
+
td.#{variables.$block-class}__select-all-toggle-on {
|
16
|
+
/* stylelint-disable-next-line declaration-no-important */
|
17
|
+
width: 4.5rem !important;
|
18
|
+
/* stylelint-disable-next-line declaration-no-important */
|
19
|
+
min-width: initial !important;
|
20
|
+
box-sizing: border-box;
|
21
|
+
flex: 0 0 auto;
|
22
|
+
}
|
20
23
|
}
|
24
|
+
|
21
25
|
th.#{variables.$block-class}__select-all-toggle-on {
|
22
26
|
display: flex;
|
23
27
|
align-items: center;
|
@@ -16,7 +16,7 @@
|
|
16
16
|
right: 0;
|
17
17
|
display: flex;
|
18
18
|
align-items: center;
|
19
|
-
border-left: 1px solid $layer-
|
19
|
+
border-left: 1px solid $layer-active-02;
|
20
20
|
}
|
21
21
|
|
22
22
|
.#{variables.$block-class}__right-sticky-column-header {
|
@@ -31,7 +31,7 @@
|
|
31
31
|
left: 0;
|
32
32
|
display: flex;
|
33
33
|
align-items: center;
|
34
|
-
border-right: 1px solid $layer-
|
34
|
+
border-right: 1px solid $layer-active-02;
|
35
35
|
}
|
36
36
|
|
37
37
|
.#{variables.$block-class}__left-sticky-column-header {
|
@@ -43,7 +43,7 @@
|
|
43
43
|
|
44
44
|
.#{variables.$block-class}__left-sticky-column-cell.#{variables.$block-class}__left-sticky-column-cell--with-extra-select-column,
|
45
45
|
.#{variables.$block-class}__left-sticky-column-header.#{variables.$block-class}__left-sticky-column-header--with-extra-select-column {
|
46
|
-
left: $spacing-
|
46
|
+
left: $spacing-09;
|
47
47
|
}
|
48
48
|
|
49
49
|
.#{variables.$block-class}__sticky-noShadow {
|
@@ -34,8 +34,6 @@
|
|
34
34
|
|
35
35
|
@mixin input-button-defaults($block-class) {
|
36
36
|
display: inline-flex;
|
37
|
-
width: var(--#{$block-class}--size);
|
38
|
-
max-width: var(--#{$block-class}--size);
|
39
37
|
height: 100%;
|
40
38
|
min-height: initial;
|
41
39
|
max-height: var(--#{$block-class}--size);
|
@@ -194,7 +192,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--inline-edit;
|
|
194
192
|
right: 0;
|
195
193
|
display: flex;
|
196
194
|
// width: room for validation, and two buttons
|
197
|
-
width: var(--#{$block-class}--toolbar-width);
|
195
|
+
// width: var(--#{$block-class}--toolbar-width);
|
198
196
|
height: 100%;
|
199
197
|
justify-content: space-between;
|
200
198
|
cursor: text;
|
@@ -1,5 +1,5 @@
|
|
1
1
|
//
|
2
|
-
// Copyright IBM Corp. 2022,
|
2
|
+
// Copyright IBM Corp. 2022, 2023
|
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.
|
@@ -8,3 +8,4 @@
|
|
8
8
|
// Tearsheets use the following Carbon components:
|
9
9
|
// Button, ComposedModal, ModalHeader, ModalBody,
|
10
10
|
@use '@carbon/react/scss/components/modal';
|
11
|
+
@use '@carbon/react/scss/layer';
|
@@ -1,5 +1,5 @@
|
|
1
1
|
//
|
2
|
-
// Copyright IBM Corp. 2020,
|
2
|
+
// Copyright IBM Corp. 2020, 2023
|
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.
|
@@ -266,6 +266,7 @@ $motion-duration: $duration-moderate-02;
|
|
266
266
|
.#{$block-class}__main {
|
267
267
|
display: flex;
|
268
268
|
flex-direction: row;
|
269
|
+
background-color: $layer;
|
269
270
|
grid-column: 1 / -1;
|
270
271
|
grid-row: 1 / -1;
|
271
272
|
}
|
@@ -281,9 +282,7 @@ $motion-duration: $duration-moderate-02;
|
|
281
282
|
}
|
282
283
|
|
283
284
|
&.#{$block-class}--wide .#{$block-class}__content {
|
284
|
-
background
|
285
|
-
|
286
|
-
// revert the background color overridden by #{$carbon-prefix}--modal styles
|
285
|
+
// Revert background color overridden by Carbon's modal - https://github.com/carbon-design-system/carbon/blob/main/packages/styles/scss/components/modal/_modal.scss#L54
|
287
286
|
.#{$carbon-prefix}--pagination,
|
288
287
|
.#{$carbon-prefix}--pagination__control-buttons,
|
289
288
|
.#{$carbon-prefix}--text-input,
|
@@ -294,7 +293,7 @@ $motion-duration: $duration-moderate-02;
|
|
294
293
|
.#{$carbon-prefix}--dropdown-list,
|
295
294
|
.#{$carbon-prefix}--number input[type='number'],
|
296
295
|
.#{$carbon-prefix}--date-picker__input {
|
297
|
-
background-color: $field
|
296
|
+
background-color: $field;
|
298
297
|
}
|
299
298
|
|
300
299
|
.#{$carbon-prefix}--select--inline .#{$carbon-prefix}--select-input {
|