@carbon/ibm-products 2.0.0-rc.11 → 2.0.0-rc.12
Sign up to get free protection for your applications and to get access to all the features.
- package/css/index-full-carbon.css +29 -74
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +2 -2
- package/css/index-full-carbon.min.css.map +1 -1
- package/css/index-without-carbon-released-only.css +1 -0
- 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 +29 -74
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +2 -2
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +28 -74
- package/css/index.css.map +1 -1
- package/css/index.min.css +2 -2
- package/css/index.min.css.map +1 -1
- package/es/components/AddSelect/AddSelectBody.js +1 -1
- package/es/components/AddSelect/hooks/usePath.js +8 -1
- package/es/components/CreateFullPage/CreateFullPage.js +9 -2
- package/es/components/CreateTearsheet/CreateTearsheet.js +9 -2
- package/es/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
- package/es/components/Datagrid/Datagrid/DatagridContent.js +10 -3
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +7 -10
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +11 -13
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +28 -27
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js} +31 -31
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/TearsheetWrapper.js +56 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +1 -1
- package/es/components/Datagrid/useCustomizeColumns.js +8 -8
- package/es/components/index.js +1 -1
- package/es/global/js/hooks/useCreateComponentFocus.js +38 -10
- package/lib/components/AddSelect/AddSelectBody.js +1 -1
- package/lib/components/AddSelect/hooks/usePath.js +7 -0
- package/lib/components/CreateFullPage/CreateFullPage.js +9 -2
- package/lib/components/CreateTearsheet/CreateTearsheet.js +9 -2
- package/lib/components/CreateTearsheet/preview-components/MultiStepTearsheet.js +3 -1
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +9 -3
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Actions.js +7 -10
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/ButtonWrapper.js +6 -6
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +30 -28
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{CustomizeColumnsModal.js → CustomizeColumnsTearsheet.js} +27 -25
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/{ModalWrapper.js → TearsheetWrapper.js} +31 -36
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/index.js +3 -3
- package/lib/components/Datagrid/useCustomizeColumns.js +7 -7
- package/lib/components/index.js +6 -0
- package/lib/global/js/hooks/useCreateComponentFocus.js +42 -11
- package/package.json +2 -2
- package/scss/components/Datagrid/styles/_datagrid.scss +5 -0
- package/scss/components/Datagrid/styles/_draggableElement.scss +9 -8
- package/scss/components/Datagrid/styles/_index.scss +7 -8
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +65 -0
- package/scss/components/Tearsheet/_tearsheet.scss +2 -0
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/ModalWrapper.js +0 -63
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsModal.scss +0 -93
@@ -21,14 +21,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
21
21
|
|
22
22
|
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; }
|
23
23
|
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
*
|
28
|
-
*
|
29
|
-
* (c) Copyright IBM Corp. 2021
|
30
|
-
* US Government Users Restricted Rights - Use, duplication or disclosure
|
31
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
24
|
+
/**
|
25
|
+
* Copyright IBM Corp. 2022, 2022
|
26
|
+
*
|
27
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
28
|
+
* LICENSE file in the root directory of this source tree.
|
32
29
|
*/
|
33
30
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
34
31
|
|
@@ -37,11 +34,11 @@ var Actions = function Actions(_ref) {
|
|
37
34
|
setSearchText = _ref.setSearchText,
|
38
35
|
findColumnPlaceholderLabel = _ref.findColumnPlaceholderLabel;
|
39
36
|
return /*#__PURE__*/React.createElement("div", {
|
40
|
-
className: "".concat(blockClass, "__customize-columns-
|
37
|
+
className: "".concat(blockClass, "__customize-columns-tearsheet--actions")
|
41
38
|
}, /*#__PURE__*/React.createElement(_react.Search, {
|
42
39
|
placeholder: findColumnPlaceholderLabel,
|
43
40
|
value: searchText,
|
44
|
-
size: "
|
41
|
+
size: "lg",
|
45
42
|
labelText: findColumnPlaceholderLabel,
|
46
43
|
onChange: function onChange(e) {
|
47
44
|
// TODO: is it performant?
|
@@ -23,7 +23,7 @@ var _react2 = require("@carbon/react");
|
|
23
23
|
|
24
24
|
var _settings = require("../../../../../settings");
|
25
25
|
|
26
|
-
var _excluded = ["onClick", "
|
26
|
+
var _excluded = ["onClick", "setIsTearsheetOpen", "isTearsheetOpen", "iconTooltipLabel"];
|
27
27
|
|
28
28
|
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); }
|
29
29
|
|
@@ -33,8 +33,8 @@ var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
|
33
33
|
|
34
34
|
var ButtonWrapper = function ButtonWrapper(_ref) {
|
35
35
|
var _onClick = _ref.onClick,
|
36
|
-
|
37
|
-
|
36
|
+
setIsTearsheetOpen = _ref.setIsTearsheetOpen,
|
37
|
+
isTearsheetOpen = _ref.isTearsheetOpen,
|
38
38
|
_ref$iconTooltipLabel = _ref.iconTooltipLabel,
|
39
39
|
iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
|
40
40
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
@@ -50,7 +50,7 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
|
|
50
50
|
hasIconOnly: true,
|
51
51
|
"test-id": "".concat(blockClass, "__customize-columns-trigger"),
|
52
52
|
onClick: function onClick() {
|
53
|
-
|
53
|
+
setIsTearsheetOpen(!isTearsheetOpen);
|
54
54
|
|
55
55
|
if (typeof _onClick === 'function') {
|
56
56
|
_onClick();
|
@@ -64,9 +64,9 @@ ButtonWrapper.defaultProps = {
|
|
64
64
|
};
|
65
65
|
ButtonWrapper.propTypes = {
|
66
66
|
iconTooltipLabel: _propTypes.default.string,
|
67
|
-
|
67
|
+
isTearsheetOpen: _propTypes.default.bool.isRequired,
|
68
68
|
onClick: _propTypes.default.func.isRequired,
|
69
|
-
|
69
|
+
setIsTearsheetOpen: _propTypes.default.func.isRequired
|
70
70
|
};
|
71
71
|
var _default = ButtonWrapper;
|
72
72
|
exports.default = _default;
|
@@ -31,14 +31,11 @@ var _common = require("./common");
|
|
31
31
|
|
32
32
|
var _classnames = _interopRequireDefault(require("classnames"));
|
33
33
|
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
*
|
38
|
-
*
|
39
|
-
* (c) Copyright IBM Corp. 2021
|
40
|
-
* US Government Users Restricted Rights - Use, duplication or disclosure
|
41
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
34
|
+
/**
|
35
|
+
* Copyright IBM Corp. 2022, 2022
|
36
|
+
*
|
37
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
38
|
+
* LICENSE file in the root directory of this source tree.
|
42
39
|
*/
|
43
40
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
44
41
|
|
@@ -57,8 +54,6 @@ var getNextIndex = function getNextIndex(array, currentIndex, key) {
|
|
57
54
|
};
|
58
55
|
|
59
56
|
var Columns = function Columns(_ref) {
|
60
|
-
var _cx;
|
61
|
-
|
62
57
|
var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
|
63
58
|
filterString = _ref.filterString,
|
64
59
|
columns = _ref.columns,
|
@@ -102,12 +97,7 @@ var Columns = function Columns(_ref) {
|
|
102
97
|
e.stopPropagation();
|
103
98
|
}
|
104
99
|
},
|
105
|
-
tabIndex: 0
|
106
|
-
onFocus: function onFocus(e) {
|
107
|
-
if (e.target === e.currentTarget) {
|
108
|
-
setFocusIndex(0);
|
109
|
-
}
|
110
|
-
}
|
100
|
+
tabIndex: 0
|
111
101
|
}, /*#__PURE__*/_react.default.createElement("span", {
|
112
102
|
"aria-live": "assertive",
|
113
103
|
className: "".concat(blockClass, "__shared-ui--assistive-text")
|
@@ -116,7 +106,7 @@ var Columns = function Columns(_ref) {
|
|
116
106
|
className: "".concat(blockClass, "__shared-ui--assistive-text")
|
117
107
|
}, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/_react.default.createElement("div", {
|
118
108
|
id: "".concat(blockClass, "__customize-columns-select-all"),
|
119
|
-
className: (0, _classnames.default)(
|
109
|
+
className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-select-all"), (0, _defineProperty2.default)({}, "".concat(blockClass, "__customize-columns-select-all--selected"), getVisibleColumnsCount() > 0)),
|
120
110
|
selected: getVisibleColumnsCount() > 0
|
121
111
|
}, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
|
122
112
|
className: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
|
@@ -130,6 +120,28 @@ var Columns = function Columns(_ref) {
|
|
130
120
|
})), columns.filter(function (colDef) {
|
131
121
|
return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
|
132
122
|
}).map(function (colDef, i) {
|
123
|
+
var searchString = new RegExp('(' + filterString + ')');
|
124
|
+
var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
|
125
|
+
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;
|
126
|
+
var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
|
127
|
+
|
128
|
+
var listContents = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_react2.Checkbox, {
|
129
|
+
className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
|
130
|
+
checked: (0, _common.isColumnVisible)(colDef),
|
131
|
+
onChange: function onChange(_, _ref2) {
|
132
|
+
var checked = _ref2.checked;
|
133
|
+
return onSelectColumn(colDef, checked);
|
134
|
+
},
|
135
|
+
id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
|
136
|
+
labelText: colDef.Header.props.title,
|
137
|
+
title: colDef.Header.props.title,
|
138
|
+
hideLabel: true
|
139
|
+
}), /*#__PURE__*/_react.default.createElement("div", {
|
140
|
+
dangerouslySetInnerHTML: {
|
141
|
+
__html: highlightedText
|
142
|
+
}
|
143
|
+
}));
|
144
|
+
|
133
145
|
return /*#__PURE__*/_react.default.createElement(_DraggableElement.default, {
|
134
146
|
key: colDef.id,
|
135
147
|
index: i,
|
@@ -158,17 +170,7 @@ var Columns = function Columns(_ref) {
|
|
158
170
|
}
|
159
171
|
},
|
160
172
|
selected: (0, _common.isColumnVisible)(colDef)
|
161
|
-
},
|
162
|
-
className: (0, _classnames.default)("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
|
163
|
-
checked: (0, _common.isColumnVisible)(colDef),
|
164
|
-
onChange: function onChange(_, _ref2) {
|
165
|
-
var checked = _ref2.checked;
|
166
|
-
return onSelectColumn(colDef, checked);
|
167
|
-
},
|
168
|
-
id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
|
169
|
-
labelText: colDef.Header.props.title,
|
170
|
-
title: colDef.Header.props.title
|
171
|
-
}));
|
173
|
+
}, listContents);
|
172
174
|
}))));
|
173
175
|
};
|
174
176
|
|
@@ -17,10 +17,10 @@ var _react = _interopRequireWildcard(require("react"));
|
|
17
17
|
|
18
18
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
19
19
|
|
20
|
-
var _react2 = require("@carbon/react");
|
21
|
-
|
22
20
|
var _common = require("./common");
|
23
21
|
|
22
|
+
var _Tearsheet = require("../../../../Tearsheet");
|
23
|
+
|
24
24
|
var _Columns = _interopRequireDefault(require("./Columns"));
|
25
25
|
|
26
26
|
var _Actions = _interopRequireDefault(require("./Actions"));
|
@@ -37,14 +37,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
37
37
|
|
38
38
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
39
39
|
|
40
|
-
var
|
40
|
+
var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
|
41
41
|
var isOpen = _ref.isOpen,
|
42
|
-
|
42
|
+
setIsTearsheetOpen = _ref.setIsTearsheetOpen,
|
43
43
|
onSaveColumnPrefs = _ref.onSaveColumnPrefs,
|
44
44
|
columnDefinitions = _ref.columnDefinitions,
|
45
45
|
originalColumnDefinitions = _ref.originalColumnDefinitions,
|
46
|
-
_ref$
|
47
|
-
|
46
|
+
_ref$customizeTearshe = _ref.customizeTearsheetHeadingLabel,
|
47
|
+
customizeTearsheetHeadingLabel = _ref$customizeTearshe === void 0 ? 'Customize columns' : _ref$customizeTearshe,
|
48
48
|
_ref$primaryButtonTex = _ref.primaryButtonTextLabel,
|
49
49
|
primaryButtonTextLabel = _ref$primaryButtonTex === void 0 ? 'Save' : _ref$primaryButtonTex,
|
50
50
|
_ref$secondaryButtonT = _ref.secondaryButtonTextLabel,
|
@@ -105,11 +105,11 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
|
|
105
105
|
setIsDirty = _useState10[1];
|
106
106
|
|
107
107
|
var onRequestClose = function onRequestClose() {
|
108
|
-
|
108
|
+
setIsTearsheetOpen(false);
|
109
109
|
};
|
110
110
|
|
111
111
|
var onRequestSubmit = function onRequestSubmit() {
|
112
|
-
|
112
|
+
setIsTearsheetOpen(false);
|
113
113
|
var updatedColumns = columnObjects.map(function (colDef) {
|
114
114
|
return {
|
115
115
|
id: colDef.id,
|
@@ -149,20 +149,22 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
|
|
149
149
|
setVisibleColumnsCount(getVisibleColumnsCount());
|
150
150
|
setTotalColumns(columnObjects.length);
|
151
151
|
}, [getVisibleColumnsCount, columnObjects.length]);
|
152
|
-
return /*#__PURE__*/_react.default.createElement(
|
153
|
-
className: "".concat(blockClass, "__customize-columns-
|
152
|
+
return /*#__PURE__*/_react.default.createElement(_Tearsheet.TearsheetNarrow, {
|
153
|
+
className: "".concat(blockClass, "__customize-columns-tearsheet"),
|
154
154
|
open: isOpen,
|
155
|
-
|
156
|
-
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
|
163
|
-
|
164
|
-
|
165
|
-
|
155
|
+
title: "".concat(customizeTearsheetHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
|
156
|
+
description: instructionsLabel,
|
157
|
+
actions: [{
|
158
|
+
kind: 'secondary',
|
159
|
+
label: secondaryButtonTextLabel,
|
160
|
+
onClick: onRequestClose
|
161
|
+
}, {
|
162
|
+
kind: 'primary',
|
163
|
+
label: primaryButtonTextLabel,
|
164
|
+
onClick: onRequestSubmit,
|
165
|
+
disabled: !isDirty
|
166
|
+
}]
|
167
|
+
}, /*#__PURE__*/_react.default.createElement(_Actions.default, {
|
166
168
|
columns: columnObjects,
|
167
169
|
originalColumnDefinitions: originalColumnDefinitions,
|
168
170
|
searchText: searchText,
|
@@ -188,11 +190,11 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
|
|
188
190
|
}));
|
189
191
|
};
|
190
192
|
|
191
|
-
|
193
|
+
CustomizeColumnsTearsheet.propTypes = {
|
192
194
|
assistiveTextDisabledInstructionsLabel: _propTypes.default.string,
|
193
195
|
assistiveTextInstructionsLabel: _propTypes.default.string,
|
194
196
|
columnDefinitions: _propTypes.default.array.isRequired,
|
195
|
-
|
197
|
+
customizeTearsheetHeadingLabel: _propTypes.default.string,
|
196
198
|
findColumnPlaceholderLabel: _propTypes.default.string,
|
197
199
|
instructionsLabel: _propTypes.default.string,
|
198
200
|
isOpen: _propTypes.default.bool.isRequired,
|
@@ -202,7 +204,7 @@ CustomizeColumnsModal.propTypes = {
|
|
202
204
|
resetToDefaultLabel: _propTypes.default.string,
|
203
205
|
secondaryButtonTextLabel: _propTypes.default.string,
|
204
206
|
selectAllLabel: _propTypes.default.string,
|
205
|
-
|
207
|
+
setIsTearsheetOpen: _propTypes.default.func.isRequired
|
206
208
|
};
|
207
|
-
var _default =
|
209
|
+
var _default = CustomizeColumnsTearsheet;
|
208
210
|
exports.default = _default;
|
@@ -17,58 +17,53 @@ var React = _interopRequireWildcard(require("react"));
|
|
17
17
|
|
18
18
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
19
19
|
|
20
|
-
var
|
20
|
+
var _CustomizeColumnsTearsheet = _interopRequireDefault(require("./CustomizeColumnsTearsheet"));
|
21
21
|
|
22
|
-
var _excluded = ["onSaveColumnPrefs", "
|
22
|
+
var _excluded = ["onSaveColumnPrefs", "isTearsheetOpen", "setIsTearsheetOpen", "labels"];
|
23
23
|
|
24
24
|
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); }
|
25
25
|
|
26
26
|
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; }
|
27
27
|
|
28
|
-
var
|
28
|
+
var TearsheetWrapper = function TearsheetWrapper(_ref) {
|
29
29
|
var instance = _ref.instance;
|
30
30
|
var _instance$customizeCo = instance.customizeColumnsProps,
|
31
31
|
_onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
|
32
|
-
|
33
|
-
|
32
|
+
isTearsheetOpen = _instance$customizeCo.isTearsheetOpen,
|
33
|
+
setIsTearsheetOpen = _instance$customizeCo.setIsTearsheetOpen,
|
34
34
|
labels = _instance$customizeCo.labels,
|
35
35
|
rest = (0, _objectWithoutProperties2.default)(_instance$customizeCo, _excluded);
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
36
|
+
return /*#__PURE__*/React.createElement(_CustomizeColumnsTearsheet.default, (0, _extends2.default)({}, rest, labels, {
|
37
|
+
isOpen: isTearsheetOpen,
|
38
|
+
setIsTearsheetOpen: setIsTearsheetOpen,
|
39
|
+
columnDefinitions: instance.allColumns,
|
40
|
+
originalColumnDefinitions: instance.columns,
|
41
|
+
onSaveColumnPrefs: function onSaveColumnPrefs(updatedColDefs) {
|
42
|
+
var hiddenIds = updatedColDefs.filter(function (colDef) {
|
43
|
+
return !colDef.isVisible;
|
44
|
+
}).map(function (colDef) {
|
45
|
+
return colDef.id;
|
46
|
+
});
|
47
|
+
instance.setHiddenColumns(hiddenIds);
|
48
|
+
|
49
|
+
if (typeof instance.setColumnOrder === 'function') {
|
50
|
+
instance.setColumnOrder(updatedColDefs.map(function (colDef) {
|
47
51
|
return colDef.id;
|
48
|
-
});
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
instance.setColumnOrder(updatedColDefs.map(function (colDef) {
|
53
|
-
return colDef.id;
|
54
|
-
}));
|
55
|
-
} else {
|
56
|
-
// eslint-disable-next-line no-console
|
57
|
-
console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
|
58
|
-
}
|
59
|
-
|
60
|
-
if (typeof _onSaveColumnPrefs === 'function') {
|
61
|
-
_onSaveColumnPrefs(updatedColDefs);
|
62
|
-
}
|
52
|
+
}));
|
53
|
+
} else {
|
54
|
+
// eslint-disable-next-line no-console
|
55
|
+
console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
|
63
56
|
}
|
64
|
-
}));
|
65
|
-
}
|
66
57
|
|
67
|
-
|
58
|
+
if (typeof _onSaveColumnPrefs === 'function') {
|
59
|
+
_onSaveColumnPrefs(updatedColDefs);
|
60
|
+
}
|
61
|
+
}
|
62
|
+
}));
|
68
63
|
};
|
69
64
|
|
70
|
-
|
65
|
+
TearsheetWrapper.propTypes = {
|
71
66
|
instance: _propTypes.default.object.isRequired
|
72
67
|
};
|
73
|
-
var _default =
|
68
|
+
var _default = TearsheetWrapper;
|
74
69
|
exports.default = _default;
|
@@ -5,10 +5,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
6
6
|
value: true
|
7
7
|
});
|
8
|
-
Object.defineProperty(exports, "
|
8
|
+
Object.defineProperty(exports, "CustomizeColumnsTearsheetWrapper", {
|
9
9
|
enumerable: true,
|
10
10
|
get: function get() {
|
11
|
-
return
|
11
|
+
return _TearsheetWrapper.default;
|
12
12
|
}
|
13
13
|
});
|
14
14
|
Object.defineProperty(exports, "ToggleButtonWrapper", {
|
@@ -18,6 +18,6 @@ Object.defineProperty(exports, "ToggleButtonWrapper", {
|
|
18
18
|
}
|
19
19
|
});
|
20
20
|
|
21
|
-
var
|
21
|
+
var _TearsheetWrapper = _interopRequireDefault(require("./TearsheetWrapper"));
|
22
22
|
|
23
23
|
var _ButtonWrapper = _interopRequireDefault(require("./ButtonWrapper"));
|
@@ -30,8 +30,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
30
30
|
var useCustomizeColumns = function useCustomizeColumns(hooks) {
|
31
31
|
var _React$useState = React.useState(false),
|
32
32
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
33
|
-
|
34
|
-
|
33
|
+
isTearsheetOpen = _React$useState2[0],
|
34
|
+
setIsTearsheetOpen = _React$useState2[1];
|
35
35
|
|
36
36
|
hooks.useInstance.push(function (instance) {
|
37
37
|
var customizeColumnsProps = instance.customizeColumnsProps;
|
@@ -41,17 +41,17 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
|
|
41
41
|
|
42
42
|
Object.assign(instance, {
|
43
43
|
customizeColumnsProps: _objectSpread(_objectSpread({}, customizeColumnsProps), {}, {
|
44
|
-
|
45
|
-
|
44
|
+
isTearsheetOpen: isTearsheetOpen,
|
45
|
+
setIsTearsheetOpen: setIsTearsheetOpen
|
46
46
|
}),
|
47
47
|
CustomizeColumnsButton: function CustomizeColumnsButton(props) {
|
48
48
|
return /*#__PURE__*/React.createElement(_CustomizeColumns.ToggleButtonWrapper, (0, _extends2.default)({
|
49
49
|
iconTooltipLabel: labels === null || labels === void 0 ? void 0 : labels.iconTooltipLabel,
|
50
|
-
|
51
|
-
|
50
|
+
isTearsheetOpen: isTearsheetOpen,
|
51
|
+
setIsTearsheetOpen: setIsTearsheetOpen
|
52
52
|
}, props));
|
53
53
|
},
|
54
|
-
|
54
|
+
CustomizeColumnsTearsheet: _CustomizeColumns.CustomizeColumnsTearsheetWrapper
|
55
55
|
});
|
56
56
|
});
|
57
57
|
};
|
package/lib/components/index.js
CHANGED
@@ -375,6 +375,12 @@ Object.defineProperty(exports, "useExpandedRow", {
|
|
375
375
|
return _Datagrid.useExpandedRow;
|
376
376
|
}
|
377
377
|
});
|
378
|
+
Object.defineProperty(exports, "useFiltering", {
|
379
|
+
enumerable: true,
|
380
|
+
get: function get() {
|
381
|
+
return _Datagrid.useFiltering;
|
382
|
+
}
|
383
|
+
});
|
378
384
|
Object.defineProperty(exports, "useInfiniteScroll", {
|
379
385
|
enumerable: true,
|
380
386
|
get: function get() {
|
@@ -1,13 +1,19 @@
|
|
1
1
|
"use strict";
|
2
2
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
4
6
|
value: true
|
5
7
|
});
|
6
8
|
exports.useCreateComponentFocus = void 0;
|
7
9
|
|
10
|
+
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
|
11
|
+
|
12
|
+
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
|
13
|
+
|
8
14
|
var _react = require("react");
|
9
15
|
|
10
|
-
var
|
16
|
+
var _wait = _interopRequireDefault(require("../utils/wait"));
|
11
17
|
|
12
18
|
/**
|
13
19
|
* Copyright IBM Corp. 2021, 2021
|
@@ -20,25 +26,50 @@ var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
|
|
20
26
|
var previousState = _ref.previousState,
|
21
27
|
currentStep = _ref.currentStep,
|
22
28
|
blockClass = _ref.blockClass,
|
23
|
-
onMount = _ref.onMount
|
29
|
+
onMount = _ref.onMount,
|
30
|
+
firstFocusElement = _ref.firstFocusElement;
|
24
31
|
(0, _react.useEffect)(function () {
|
25
32
|
if (typeof onMount === 'function') {
|
26
33
|
onMount();
|
27
34
|
}
|
28
35
|
}, [onMount]);
|
29
36
|
(0, _react.useEffect)(function () {
|
37
|
+
// because of how handleStackChange.claimFocus in TearsheetShell works a timeout is required to focus on specific elements
|
38
|
+
var awaitFocus = /*#__PURE__*/function () {
|
39
|
+
var _ref2 = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(elm) {
|
40
|
+
return _regenerator.default.wrap(function _callee$(_context) {
|
41
|
+
while (1) {
|
42
|
+
switch (_context.prev = _context.next) {
|
43
|
+
case 0:
|
44
|
+
_context.next = 2;
|
45
|
+
return (0, _wait.default)(10);
|
46
|
+
|
47
|
+
case 2:
|
48
|
+
elm.focus();
|
49
|
+
|
50
|
+
case 3:
|
51
|
+
case "end":
|
52
|
+
return _context.stop();
|
53
|
+
}
|
54
|
+
}
|
55
|
+
}, _callee);
|
56
|
+
}));
|
57
|
+
|
58
|
+
return function awaitFocus(_x) {
|
59
|
+
return _ref2.apply(this, arguments);
|
60
|
+
};
|
61
|
+
}();
|
62
|
+
|
30
63
|
if ((previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== currentStep && currentStep > 0) {
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
var nextButton = document.querySelector(".".concat(blockClass, "__create-button"));
|
38
|
-
nextButton === null || nextButton === void 0 ? void 0 : nextButton.focus();
|
64
|
+
if (firstFocusElement) {
|
65
|
+
var elm = document.querySelector(firstFocusElement);
|
66
|
+
|
67
|
+
if (elm) {
|
68
|
+
awaitFocus(elm);
|
69
|
+
}
|
39
70
|
}
|
40
71
|
}
|
41
|
-
}, [currentStep, previousState, blockClass, onMount]);
|
72
|
+
}, [currentStep, previousState, blockClass, onMount, firstFocusElement]);
|
42
73
|
};
|
43
74
|
|
44
75
|
exports.useCreateComponentFocus = useCreateComponentFocus;
|
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.12",
|
5
5
|
"license": "Apache-2.0",
|
6
6
|
"main": "lib/index.js",
|
7
7
|
"module": "es/index.js",
|
@@ -94,5 +94,5 @@
|
|
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": "feb17ff087be1ed1174b0e0cfa44dd1f991e2881"
|
98
98
|
}
|
@@ -542,6 +542,11 @@
|
|
542
542
|
justify-content: center;
|
543
543
|
}
|
544
544
|
|
545
|
+
.#{$block-class}__customize-columns-checkbox-wrapper.#{c4p-settings.$carbon-prefix}--form-item {
|
546
|
+
flex: 0 0 auto;
|
547
|
+
margin-right: $spacing-03;
|
548
|
+
}
|
549
|
+
|
545
550
|
.#{$block-class}__virtual-scrollbar::-webkit-scrollbar {
|
546
551
|
width: 10px;
|
547
552
|
height: 7px;
|
@@ -1,10 +1,10 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2022, 2022
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
7
|
+
|
8
8
|
@use '@carbon/styles/scss/theme' as *;
|
9
9
|
@use '@carbon/styles/scss/spacing' as *;
|
10
10
|
@use './variables';
|
@@ -20,7 +20,7 @@
|
|
20
20
|
pointer-events: none;
|
21
21
|
}
|
22
22
|
|
23
|
-
|
23
|
+
.#{variables.$block-class}__draggable-handleStyle.disabled svg {
|
24
24
|
fill: $icon-disabled;
|
25
25
|
}
|
26
26
|
|
@@ -56,6 +56,7 @@ svg.#{variables.$block-class}__draggable-handleStyle.disable {
|
|
56
56
|
.#{variables.$block-class}__draggable-handleHolder-droppable {
|
57
57
|
display: flex;
|
58
58
|
width: 100%;
|
59
|
+
align-items: center;
|
59
60
|
}
|
60
61
|
|
61
62
|
.#{variables.$block-class}__draggable-handleHolder-grabbed {
|
@@ -1,10 +1,9 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
*/
|
1
|
+
//
|
2
|
+
// Copyright IBM Corp. 2022, 2022
|
3
|
+
//
|
4
|
+
// This source code is licensed under the Apache-2.0 license found in the
|
5
|
+
// LICENSE file in the root directory of this source tree.
|
6
|
+
//
|
8
7
|
@use './datagrid';
|
9
8
|
@use './useNestedRows';
|
10
9
|
@use './useNestedTable';
|
@@ -13,7 +12,7 @@
|
|
13
12
|
@use './useColumnCenterAlign';
|
14
13
|
@use './useStickyColumn';
|
15
14
|
@use './useActionsColumn';
|
16
|
-
@use './addons/
|
15
|
+
@use './addons/CustomizeColumnsTearsheet';
|
17
16
|
@use './addons/RowSizeDropdown';
|
18
17
|
@use './addons/FilterFlyout';
|
19
18
|
@use './useSelectAllToggle';
|