@carbon/ibm-products 1.43.0 → 1.44.1
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +4 -0
- 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.css +4 -0
- 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 +4 -0
- 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/DraggableElement.js +5 -3
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +6 -2
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
- package/es/components/Tearsheet/Tearsheet.js +4 -0
- package/es/components/Tearsheet/TearsheetNarrow.js +4 -0
- package/es/components/Tearsheet/TearsheetShell.js +1 -1
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +4 -2
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +6 -2
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js +1 -1
- package/lib/components/Tearsheet/Tearsheet.js +4 -0
- package/lib/components/Tearsheet/TearsheetNarrow.js +4 -0
- package/lib/components/Tearsheet/TearsheetShell.js +1 -1
- package/package.json +2 -2
- package/scss/components/Datagrid/styles/_draggableElement.scss +4 -0
@@ -175,6 +175,10 @@ Tearsheet.propTypes = _objectSpread({
|
|
175
175
|
* Specifies whether the tearsheet is currently open.
|
176
176
|
*/
|
177
177
|
open: PropTypes.bool,
|
178
|
+
/**
|
179
|
+
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
180
|
+
*/
|
181
|
+
portalTarget: PropTypes.node,
|
178
182
|
/**
|
179
183
|
* The main title of the tearsheet, displayed in the header area.
|
180
184
|
*/
|
@@ -141,6 +141,10 @@ TearsheetNarrow.propTypes = _objectSpread({
|
|
141
141
|
* Specifies whether the tearsheet is currently open.
|
142
142
|
*/
|
143
143
|
open: PropTypes.bool,
|
144
|
+
/**
|
145
|
+
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
146
|
+
*/
|
147
|
+
portalTarget: PropTypes.node,
|
144
148
|
/**
|
145
149
|
* The main title of the tearsheet, displayed in the header area.
|
146
150
|
*/
|
@@ -388,7 +388,7 @@ TearsheetShell.propTypes = _objectSpread({
|
|
388
388
|
*/
|
389
389
|
open: PropTypes.bool,
|
390
390
|
/**
|
391
|
-
*
|
391
|
+
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
392
392
|
*/
|
393
393
|
portalTarget: PropTypes.node,
|
394
394
|
/**
|
@@ -42,6 +42,7 @@ var DraggableElement = function DraggableElement(_ref) {
|
|
42
42
|
onGrab = _ref.onGrab,
|
43
43
|
onArrowKeyDown = _ref.onArrowKeyDown,
|
44
44
|
isFocused = _ref.isFocused,
|
45
|
+
isSticky = _ref.isSticky,
|
45
46
|
moveElement = _ref.moveElement,
|
46
47
|
selected = _ref.selected,
|
47
48
|
_ref$positionLabel = _ref.positionLabel,
|
@@ -121,9 +122,9 @@ var DraggableElement = function DraggableElement(_ref) {
|
|
121
122
|
className: (0, _classnames.default)({
|
122
123
|
disabled: disabled
|
123
124
|
}, "".concat(blockClass, "__draggable-handleStyle"))
|
124
|
-
}, /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), children);
|
125
|
+
}, isSticky ? /*#__PURE__*/React.createElement(_iconsReact.Locked16, null) : /*#__PURE__*/React.createElement(_iconsReact.Draggable16, null)), children);
|
125
126
|
return /*#__PURE__*/React.createElement("li", {
|
126
|
-
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
|
127
|
+
className: (0, _classnames.default)((_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-isOver"), isOver && !disabled), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-grabbed"), isGrabbed), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder-selected"), selected), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), (0, _defineProperty2.default)(_cx, "".concat(blockClass, "__draggable-handleHolder"), !selected), _cx)),
|
127
128
|
ref: ref,
|
128
129
|
"aria-selected": isFocused,
|
129
130
|
role: "option",
|
@@ -171,6 +172,7 @@ DraggableElement.propTypes = {
|
|
171
172
|
id: _propTypes.default.string.isRequired,
|
172
173
|
index: _propTypes.default.number.isRequired,
|
173
174
|
isFocused: _propTypes.default.bool.isRequired,
|
175
|
+
isSticky: _propTypes.default.bool,
|
174
176
|
listData: _propTypes.default.array.isRequired,
|
175
177
|
moveElement: _propTypes.default.func.isRequired,
|
176
178
|
onArrowKeyDown: _propTypes.default.func.isRequired,
|
@@ -101,9 +101,11 @@ var Columns = function Columns(_ref) {
|
|
101
101
|
var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
|
102
102
|
var firstWord = res !== null ? res[0] === '' ? res[1].charAt(0).toUpperCase() + res[1].substring(1) : res[0].charAt(0).toUpperCase() + res[0].substring(1) : null;
|
103
103
|
var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
|
104
|
+
var isFrozenColumn = !!colDef.sticky;
|
104
105
|
var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_carbonComponentsReact.Checkbox, {
|
105
106
|
wrapperClassName: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
|
106
107
|
checked: (0, _common.isColumnVisible)(colDef),
|
108
|
+
disabled: isFrozenColumn,
|
107
109
|
onChange: onSelectColumn.bind(null, colDef),
|
108
110
|
id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
|
109
111
|
labelText: colDef.Header.props.title,
|
@@ -122,17 +124,18 @@ var Columns = function Columns(_ref) {
|
|
122
124
|
setListData: setColumnsObject,
|
123
125
|
id: "dnd-datagrid-columns-".concat(colDef.id),
|
124
126
|
type: "column-customization",
|
125
|
-
disabled: filterString.length > 0,
|
127
|
+
disabled: filterString.length > 0 || isFrozenColumn,
|
126
128
|
ariaLabel: colDef.Header.props.title,
|
127
129
|
onGrab: setAriaRegionText,
|
128
130
|
isFocused: focusIndex === i,
|
129
131
|
moveElement: moveElement,
|
130
132
|
onArrowKeyDown: function onArrowKeyDown(e, isGrabbed, currentIndex) {
|
131
133
|
if (isGrabbed) {
|
134
|
+
var _columns$nextIndex;
|
132
135
|
var nextIndex = getNextIndex(columns, currentIndex, e.key);
|
133
136
|
e.preventDefault();
|
134
137
|
e.stopPropagation();
|
135
|
-
if (nextIndex >= 0) {
|
138
|
+
if (nextIndex >= 0 && !((_columns$nextIndex = columns[nextIndex]) !== null && _columns$nextIndex !== void 0 && _columns$nextIndex.sticky)) {
|
136
139
|
setFocusIndex(nextIndex);
|
137
140
|
moveElement(currentIndex, nextIndex);
|
138
141
|
e.target.scrollIntoView({
|
@@ -141,6 +144,7 @@ var Columns = function Columns(_ref) {
|
|
141
144
|
}
|
142
145
|
}
|
143
146
|
},
|
147
|
+
isSticky: isFrozenColumn,
|
144
148
|
selected: (0, _common.isColumnVisible)(colDef)
|
145
149
|
}, listContents);
|
146
150
|
}))));
|
package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js
CHANGED
@@ -59,7 +59,7 @@ var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
|
|
59
59
|
var _useState7 = (0, _react.useState)(columnDefinitions
|
60
60
|
// hide the columns without Header, e.g the sticky actions, spacer
|
61
61
|
.filter(function (colDef) {
|
62
|
-
return !!colDef.Header.props;
|
62
|
+
return !!colDef.Header.props && !colDef.isAction;
|
63
63
|
})
|
64
64
|
// only sort the hidden column to the end when modal reopen
|
65
65
|
.sort(function (defA, defB) {
|
@@ -172,6 +172,10 @@ Tearsheet.propTypes = _objectSpread({
|
|
172
172
|
* Specifies whether the tearsheet is currently open.
|
173
173
|
*/
|
174
174
|
open: _propTypes.default.bool,
|
175
|
+
/**
|
176
|
+
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
177
|
+
*/
|
178
|
+
portalTarget: _propTypes.default.node,
|
175
179
|
/**
|
176
180
|
* The main title of the tearsheet, displayed in the header area.
|
177
181
|
*/
|
@@ -138,6 +138,10 @@ TearsheetNarrow.propTypes = _objectSpread({
|
|
138
138
|
* Specifies whether the tearsheet is currently open.
|
139
139
|
*/
|
140
140
|
open: _propTypes.default.bool,
|
141
|
+
/**
|
142
|
+
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
143
|
+
*/
|
144
|
+
portalTarget: _propTypes.default.node,
|
141
145
|
/**
|
142
146
|
* The main title of the tearsheet, displayed in the header area.
|
143
147
|
*/
|
@@ -390,7 +390,7 @@ TearsheetShell.propTypes = _objectSpread({
|
|
390
390
|
*/
|
391
391
|
open: _propTypes.default.bool,
|
392
392
|
/**
|
393
|
-
*
|
393
|
+
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
394
394
|
*/
|
395
395
|
portalTarget: _propTypes.default.node,
|
396
396
|
/**
|
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.44.1",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -95,5 +95,5 @@
|
|
95
95
|
"react": "^16.8.6 || ^17.0.1",
|
96
96
|
"react-dom": "^16.8.6 || ^17.0.1"
|
97
97
|
},
|
98
|
-
"gitHead": "
|
98
|
+
"gitHead": "fc263168325ad92efaa868582b43760e317d9a33"
|
99
99
|
}
|
@@ -70,6 +70,10 @@
|
|
70
70
|
color: $text-01;
|
71
71
|
}
|
72
72
|
|
73
|
+
.#{$block-class}__draggable-handleHolder--sticky {
|
74
|
+
color: $disabled-03;
|
75
|
+
}
|
76
|
+
|
73
77
|
.#{$block-class}__shared-ui--assistive-text {
|
74
78
|
// hide the assistive text. can not use display: none which will also hide from ARIA
|
75
79
|
position: absolute;
|