@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
@@ -1,14 +1,12 @@
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
2
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
3
|
-
var _excluded = ["onClick", "
|
4
|
-
// @flow
|
3
|
+
var _excluded = ["onClick", "setIsTearsheetOpen", "isTearsheetOpen", "iconTooltipLabel"];
|
5
4
|
|
6
|
-
|
7
|
-
*
|
8
|
-
*
|
9
|
-
*
|
10
|
-
*
|
11
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
5
|
+
/**
|
6
|
+
* Copyright IBM Corp. 2022, 2022
|
7
|
+
*
|
8
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
9
|
+
* LICENSE file in the root directory of this source tree.
|
12
10
|
*/
|
13
11
|
import * as React from 'react';
|
14
12
|
import PropTypes from 'prop-types';
|
@@ -19,8 +17,8 @@ var blockClass = "".concat(pkg.prefix, "--datagrid");
|
|
19
17
|
|
20
18
|
var ButtonWrapper = function ButtonWrapper(_ref) {
|
21
19
|
var _onClick = _ref.onClick,
|
22
|
-
|
23
|
-
|
20
|
+
setIsTearsheetOpen = _ref.setIsTearsheetOpen,
|
21
|
+
isTearsheetOpen = _ref.isTearsheetOpen,
|
24
22
|
_ref$iconTooltipLabel = _ref.iconTooltipLabel,
|
25
23
|
iconTooltipLabel = _ref$iconTooltipLabel === void 0 ? 'Customize columns' : _ref$iconTooltipLabel,
|
26
24
|
rest = _objectWithoutProperties(_ref, _excluded);
|
@@ -37,7 +35,7 @@ var ButtonWrapper = function ButtonWrapper(_ref) {
|
|
37
35
|
hasIconOnly: true,
|
38
36
|
"test-id": "".concat(blockClass, "__customize-columns-trigger"),
|
39
37
|
onClick: function onClick() {
|
40
|
-
|
38
|
+
setIsTearsheetOpen(!isTearsheetOpen);
|
41
39
|
|
42
40
|
if (typeof _onClick === 'function') {
|
43
41
|
_onClick();
|
@@ -51,8 +49,8 @@ ButtonWrapper.defaultProps = {
|
|
51
49
|
};
|
52
50
|
ButtonWrapper.propTypes = {
|
53
51
|
iconTooltipLabel: PropTypes.string,
|
54
|
-
|
52
|
+
isTearsheetOpen: PropTypes.bool.isRequired,
|
55
53
|
onClick: PropTypes.func.isRequired,
|
56
|
-
|
54
|
+
setIsTearsheetOpen: PropTypes.func.isRequired
|
57
55
|
};
|
58
56
|
export default ButtonWrapper;
|
@@ -1,13 +1,11 @@
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
3
|
-
// @flow
|
4
3
|
|
5
|
-
|
6
|
-
*
|
7
|
-
*
|
8
|
-
*
|
9
|
-
*
|
10
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
4
|
+
/**
|
5
|
+
* Copyright IBM Corp. 2022, 2022
|
6
|
+
*
|
7
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
11
9
|
*/
|
12
10
|
import React from 'react';
|
13
11
|
import PropTypes from 'prop-types';
|
@@ -36,8 +34,6 @@ var getNextIndex = function getNextIndex(array, currentIndex, key) {
|
|
36
34
|
};
|
37
35
|
|
38
36
|
var Columns = function Columns(_ref) {
|
39
|
-
var _cx;
|
40
|
-
|
41
37
|
var getVisibleColumnsCount = _ref.getVisibleColumnsCount,
|
42
38
|
filterString = _ref.filterString,
|
43
39
|
columns = _ref.columns,
|
@@ -80,12 +76,7 @@ var Columns = function Columns(_ref) {
|
|
80
76
|
e.stopPropagation();
|
81
77
|
}
|
82
78
|
},
|
83
|
-
tabIndex: 0
|
84
|
-
onFocus: function onFocus(e) {
|
85
|
-
if (e.target === e.currentTarget) {
|
86
|
-
setFocusIndex(0);
|
87
|
-
}
|
88
|
-
}
|
79
|
+
tabIndex: 0
|
89
80
|
}, /*#__PURE__*/React.createElement("span", {
|
90
81
|
"aria-live": "assertive",
|
91
82
|
className: "".concat(blockClass, "__shared-ui--assistive-text")
|
@@ -94,7 +85,7 @@ var Columns = function Columns(_ref) {
|
|
94
85
|
className: "".concat(blockClass, "__shared-ui--assistive-text")
|
95
86
|
}, filterString.length === 0 ? assistiveTextInstructionsLabel : assistiveTextDisabledInstructionsLabel), /*#__PURE__*/React.createElement("div", {
|
96
87
|
id: "".concat(blockClass, "__customize-columns-select-all"),
|
97
|
-
className: cx(
|
88
|
+
className: cx("".concat(blockClass, "__customize-columns-select-all"), _defineProperty({}, "".concat(blockClass, "__customize-columns-select-all--selected"), getVisibleColumnsCount() > 0)),
|
98
89
|
selected: getVisibleColumnsCount() > 0
|
99
90
|
}, /*#__PURE__*/React.createElement(Checkbox, {
|
100
91
|
className: "".concat(blockClass, "__customize-columns-checkbox-wrapper"),
|
@@ -108,6 +99,26 @@ var Columns = function Columns(_ref) {
|
|
108
99
|
})), columns.filter(function (colDef) {
|
109
100
|
return filterString.length === 0 || colDef.Header.props.title.toLowerCase().includes(filterString);
|
110
101
|
}).map(function (colDef, i) {
|
102
|
+
var searchString = new RegExp('(' + filterString + ')');
|
103
|
+
var res = filterString.length ? colDef.Header.props.title.toLowerCase().split(searchString) : null;
|
104
|
+
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;
|
105
|
+
var highlightedText = res !== null ? res[0] === '' ? "<strong>".concat(firstWord, "</strong>") + res[2] : firstWord + "<strong>".concat(res[1], "</strong>") + res[2] : colDef.Header.props.title;
|
106
|
+
var listContents = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Checkbox, {
|
107
|
+
className: cx("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
|
108
|
+
checked: isColumnVisible(colDef),
|
109
|
+
onChange: function onChange(_, _ref2) {
|
110
|
+
var checked = _ref2.checked;
|
111
|
+
return onSelectColumn(colDef, checked);
|
112
|
+
},
|
113
|
+
id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
|
114
|
+
labelText: colDef.Header.props.title,
|
115
|
+
title: colDef.Header.props.title,
|
116
|
+
hideLabel: true
|
117
|
+
}), /*#__PURE__*/React.createElement("div", {
|
118
|
+
dangerouslySetInnerHTML: {
|
119
|
+
__html: highlightedText
|
120
|
+
}
|
121
|
+
}));
|
111
122
|
return /*#__PURE__*/React.createElement(DraggableElement, {
|
112
123
|
key: colDef.id,
|
113
124
|
index: i,
|
@@ -136,17 +147,7 @@ var Columns = function Columns(_ref) {
|
|
136
147
|
}
|
137
148
|
},
|
138
149
|
selected: isColumnVisible(colDef)
|
139
|
-
},
|
140
|
-
className: cx("".concat(blockClass, "__customize-columns-checkbox-wrapper"), "".concat(blockClass, "__customize-columns-checkbox")),
|
141
|
-
checked: isColumnVisible(colDef),
|
142
|
-
onChange: function onChange(_, _ref2) {
|
143
|
-
var checked = _ref2.checked;
|
144
|
-
return onSelectColumn(colDef, checked);
|
145
|
-
},
|
146
|
-
id: "".concat(blockClass, "__customization-column-").concat(colDef.id),
|
147
|
-
labelText: colDef.Header.props.title,
|
148
|
-
title: colDef.Header.props.title
|
149
|
-
}));
|
150
|
+
}, listContents);
|
150
151
|
}))));
|
151
152
|
};
|
152
153
|
|
@@ -5,32 +5,30 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
5
5
|
|
6
6
|
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) { _defineProperty(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; }
|
7
7
|
|
8
|
-
|
9
|
-
*
|
10
|
-
*
|
11
|
-
*
|
12
|
-
*
|
13
|
-
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
8
|
+
/**
|
9
|
+
* Copyright IBM Corp. 2022, 2022
|
10
|
+
*
|
11
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
14
13
|
*/
|
15
|
-
// @flow
|
16
14
|
import React, { useEffect, useState } from 'react';
|
17
15
|
import PropTypes from 'prop-types';
|
18
|
-
import { Modal } from '@carbon/react';
|
19
16
|
import { isColumnVisible } from './common';
|
17
|
+
import { TearsheetNarrow } from '../../../../Tearsheet';
|
20
18
|
import Columns from './Columns';
|
21
19
|
import Actions from './Actions';
|
22
20
|
import { pkg } from '../../../../../settings';
|
23
21
|
import { useCallback } from 'react';
|
24
22
|
var blockClass = "".concat(pkg.prefix, "--datagrid");
|
25
23
|
|
26
|
-
var
|
24
|
+
var CustomizeColumnsTearsheet = function CustomizeColumnsTearsheet(_ref) {
|
27
25
|
var isOpen = _ref.isOpen,
|
28
|
-
|
26
|
+
setIsTearsheetOpen = _ref.setIsTearsheetOpen,
|
29
27
|
onSaveColumnPrefs = _ref.onSaveColumnPrefs,
|
30
28
|
columnDefinitions = _ref.columnDefinitions,
|
31
29
|
originalColumnDefinitions = _ref.originalColumnDefinitions,
|
32
|
-
_ref$
|
33
|
-
|
30
|
+
_ref$customizeTearshe = _ref.customizeTearsheetHeadingLabel,
|
31
|
+
customizeTearsheetHeadingLabel = _ref$customizeTearshe === void 0 ? 'Customize columns' : _ref$customizeTearshe,
|
34
32
|
_ref$primaryButtonTex = _ref.primaryButtonTextLabel,
|
35
33
|
primaryButtonTextLabel = _ref$primaryButtonTex === void 0 ? 'Save' : _ref$primaryButtonTex,
|
36
34
|
_ref$secondaryButtonT = _ref.secondaryButtonTextLabel,
|
@@ -91,11 +89,11 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
|
|
91
89
|
setIsDirty = _useState10[1];
|
92
90
|
|
93
91
|
var onRequestClose = function onRequestClose() {
|
94
|
-
|
92
|
+
setIsTearsheetOpen(false);
|
95
93
|
};
|
96
94
|
|
97
95
|
var onRequestSubmit = function onRequestSubmit() {
|
98
|
-
|
96
|
+
setIsTearsheetOpen(false);
|
99
97
|
var updatedColumns = columnObjects.map(function (colDef) {
|
100
98
|
return {
|
101
99
|
id: colDef.id,
|
@@ -135,20 +133,22 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
|
|
135
133
|
setVisibleColumnsCount(getVisibleColumnsCount());
|
136
134
|
setTotalColumns(columnObjects.length);
|
137
135
|
}, [getVisibleColumnsCount, columnObjects.length]);
|
138
|
-
return /*#__PURE__*/React.createElement(
|
139
|
-
className: "".concat(blockClass, "__customize-columns-
|
136
|
+
return /*#__PURE__*/React.createElement(TearsheetNarrow, {
|
137
|
+
className: "".concat(blockClass, "__customize-columns-tearsheet"),
|
140
138
|
open: isOpen,
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
|
150
|
-
|
151
|
-
|
139
|
+
title: "".concat(customizeTearsheetHeadingLabel, " (").concat(visibleColumnsCount, "/").concat(totalColumns, ")"),
|
140
|
+
description: instructionsLabel,
|
141
|
+
actions: [{
|
142
|
+
kind: 'secondary',
|
143
|
+
label: secondaryButtonTextLabel,
|
144
|
+
onClick: onRequestClose
|
145
|
+
}, {
|
146
|
+
kind: 'primary',
|
147
|
+
label: primaryButtonTextLabel,
|
148
|
+
onClick: onRequestSubmit,
|
149
|
+
disabled: !isDirty
|
150
|
+
}]
|
151
|
+
}, /*#__PURE__*/React.createElement(Actions, {
|
152
152
|
columns: columnObjects,
|
153
153
|
originalColumnDefinitions: originalColumnDefinitions,
|
154
154
|
searchText: searchText,
|
@@ -174,11 +174,11 @@ var CustomizeColumnsModal = function CustomizeColumnsModal(_ref) {
|
|
174
174
|
}));
|
175
175
|
};
|
176
176
|
|
177
|
-
|
177
|
+
CustomizeColumnsTearsheet.propTypes = {
|
178
178
|
assistiveTextDisabledInstructionsLabel: PropTypes.string,
|
179
179
|
assistiveTextInstructionsLabel: PropTypes.string,
|
180
180
|
columnDefinitions: PropTypes.array.isRequired,
|
181
|
-
|
181
|
+
customizeTearsheetHeadingLabel: PropTypes.string,
|
182
182
|
findColumnPlaceholderLabel: PropTypes.string,
|
183
183
|
instructionsLabel: PropTypes.string,
|
184
184
|
isOpen: PropTypes.bool.isRequired,
|
@@ -188,6 +188,6 @@ CustomizeColumnsModal.propTypes = {
|
|
188
188
|
resetToDefaultLabel: PropTypes.string,
|
189
189
|
secondaryButtonTextLabel: PropTypes.string,
|
190
190
|
selectAllLabel: PropTypes.string,
|
191
|
-
|
191
|
+
setIsTearsheetOpen: PropTypes.func.isRequired
|
192
192
|
};
|
193
|
-
export default
|
193
|
+
export default CustomizeColumnsTearsheet;
|
@@ -0,0 +1,56 @@
|
|
1
|
+
import _extends from "@babel/runtime/helpers/extends";
|
2
|
+
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
3
|
+
var _excluded = ["onSaveColumnPrefs", "isTearsheetOpen", "setIsTearsheetOpen", "labels"];
|
4
|
+
|
5
|
+
/* Copyright IBM Corp. 2022, 2022
|
6
|
+
*
|
7
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
8
|
+
* LICENSE file in the root directory of this source tree.
|
9
|
+
*/
|
10
|
+
import * as React from 'react';
|
11
|
+
import PropTypes from 'prop-types';
|
12
|
+
import CustomizeColumnsTearsheet from './CustomizeColumnsTearsheet';
|
13
|
+
|
14
|
+
var TearsheetWrapper = function TearsheetWrapper(_ref) {
|
15
|
+
var instance = _ref.instance;
|
16
|
+
|
17
|
+
var _instance$customizeCo = instance.customizeColumnsProps,
|
18
|
+
_onSaveColumnPrefs = _instance$customizeCo.onSaveColumnPrefs,
|
19
|
+
isTearsheetOpen = _instance$customizeCo.isTearsheetOpen,
|
20
|
+
setIsTearsheetOpen = _instance$customizeCo.setIsTearsheetOpen,
|
21
|
+
labels = _instance$customizeCo.labels,
|
22
|
+
rest = _objectWithoutProperties(_instance$customizeCo, _excluded);
|
23
|
+
|
24
|
+
return /*#__PURE__*/React.createElement(CustomizeColumnsTearsheet, _extends({}, rest, labels, {
|
25
|
+
isOpen: isTearsheetOpen,
|
26
|
+
setIsTearsheetOpen: setIsTearsheetOpen,
|
27
|
+
columnDefinitions: instance.allColumns,
|
28
|
+
originalColumnDefinitions: instance.columns,
|
29
|
+
onSaveColumnPrefs: function onSaveColumnPrefs(updatedColDefs) {
|
30
|
+
var hiddenIds = updatedColDefs.filter(function (colDef) {
|
31
|
+
return !colDef.isVisible;
|
32
|
+
}).map(function (colDef) {
|
33
|
+
return colDef.id;
|
34
|
+
});
|
35
|
+
instance.setHiddenColumns(hiddenIds);
|
36
|
+
|
37
|
+
if (typeof instance.setColumnOrder === 'function') {
|
38
|
+
instance.setColumnOrder(updatedColDefs.map(function (colDef) {
|
39
|
+
return colDef.id;
|
40
|
+
}));
|
41
|
+
} else {
|
42
|
+
// eslint-disable-next-line no-console
|
43
|
+
console.warn("Column order can not be updated. Did you forget to add 'useColumnOrder' in 'useDatagrid'");
|
44
|
+
}
|
45
|
+
|
46
|
+
if (typeof _onSaveColumnPrefs === 'function') {
|
47
|
+
_onSaveColumnPrefs(updatedColDefs);
|
48
|
+
}
|
49
|
+
}
|
50
|
+
}));
|
51
|
+
};
|
52
|
+
|
53
|
+
TearsheetWrapper.propTypes = {
|
54
|
+
instance: PropTypes.object.isRequired
|
55
|
+
};
|
56
|
+
export default TearsheetWrapper;
|
@@ -5,5 +5,5 @@
|
|
5
5
|
* US Government Users Restricted Rights - Use, duplication or disclosure
|
6
6
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
7
7
|
*/
|
8
|
-
export { default as
|
8
|
+
export { default as CustomizeColumnsTearsheetWrapper } from './TearsheetWrapper';
|
9
9
|
export { default as ToggleButtonWrapper } from './ButtonWrapper';
|
@@ -16,13 +16,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
|
|
16
16
|
* restricted by GSA ADP Schedule Contract with IBM Corp.
|
17
17
|
*/
|
18
18
|
import * as React from 'react';
|
19
|
-
import {
|
19
|
+
import { CustomizeColumnsTearsheetWrapper, ToggleButtonWrapper } from './Datagrid/addons/CustomizeColumns';
|
20
20
|
|
21
21
|
var useCustomizeColumns = function useCustomizeColumns(hooks) {
|
22
22
|
var _React$useState = React.useState(false),
|
23
23
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
24
|
-
|
25
|
-
|
24
|
+
isTearsheetOpen = _React$useState2[0],
|
25
|
+
setIsTearsheetOpen = _React$useState2[1];
|
26
26
|
|
27
27
|
hooks.useInstance.push(function (instance) {
|
28
28
|
var customizeColumnsProps = instance.customizeColumnsProps;
|
@@ -32,17 +32,17 @@ var useCustomizeColumns = function useCustomizeColumns(hooks) {
|
|
32
32
|
|
33
33
|
Object.assign(instance, {
|
34
34
|
customizeColumnsProps: _objectSpread(_objectSpread({}, customizeColumnsProps), {}, {
|
35
|
-
|
36
|
-
|
35
|
+
isTearsheetOpen: isTearsheetOpen,
|
36
|
+
setIsTearsheetOpen: setIsTearsheetOpen
|
37
37
|
}),
|
38
38
|
CustomizeColumnsButton: function CustomizeColumnsButton(props) {
|
39
39
|
return /*#__PURE__*/React.createElement(ToggleButtonWrapper, _extends({
|
40
40
|
iconTooltipLabel: labels === null || labels === void 0 ? void 0 : labels.iconTooltipLabel,
|
41
|
-
|
42
|
-
|
41
|
+
isTearsheetOpen: isTearsheetOpen,
|
42
|
+
setIsTearsheetOpen: setIsTearsheetOpen
|
43
43
|
}, props));
|
44
44
|
},
|
45
|
-
|
45
|
+
CustomizeColumnsTearsheet: CustomizeColumnsTearsheetWrapper
|
46
46
|
});
|
47
47
|
});
|
48
48
|
};
|
package/es/components/index.js
CHANGED
@@ -37,7 +37,7 @@ export { EditSidePanel } from './EditSidePanel';
|
|
37
37
|
export { OptionsTile } from './OptionsTile';
|
38
38
|
export { InlineEdit } from './InlineEdit';
|
39
39
|
export { DataSpreadsheet } from './DataSpreadsheet';
|
40
|
-
export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit } from './Datagrid';
|
40
|
+
export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering } from './Datagrid';
|
41
41
|
export { EditTearsheet } from './EditTearsheet';
|
42
42
|
export { EditTearsheetNarrow } from './EditTearsheetNarrow';
|
43
43
|
export { EditFullPage } from './EditFullPage';
|
@@ -1,3 +1,6 @@
|
|
1
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
2
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
3
|
+
|
1
4
|
/**
|
2
5
|
* Copyright IBM Corp. 2021, 2021
|
3
6
|
*
|
@@ -5,29 +8,54 @@
|
|
5
8
|
* LICENSE file in the root directory of this source tree.
|
6
9
|
*/
|
7
10
|
import { useEffect } from 'react';
|
8
|
-
import
|
11
|
+
import wait from '../utils/wait'; // Focus the first focusable element and call the onMount prop for the current step if one is provided
|
9
12
|
|
10
13
|
export var useCreateComponentFocus = function useCreateComponentFocus(_ref) {
|
11
14
|
var previousState = _ref.previousState,
|
12
15
|
currentStep = _ref.currentStep,
|
13
16
|
blockClass = _ref.blockClass,
|
14
|
-
onMount = _ref.onMount
|
17
|
+
onMount = _ref.onMount,
|
18
|
+
firstFocusElement = _ref.firstFocusElement;
|
15
19
|
useEffect(function () {
|
16
20
|
if (typeof onMount === 'function') {
|
17
21
|
onMount();
|
18
22
|
}
|
19
23
|
}, [onMount]);
|
20
24
|
useEffect(function () {
|
25
|
+
// because of how handleStackChange.claimFocus in TearsheetShell works a timeout is required to focus on specific elements
|
26
|
+
var awaitFocus = /*#__PURE__*/function () {
|
27
|
+
var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(elm) {
|
28
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
29
|
+
while (1) {
|
30
|
+
switch (_context.prev = _context.next) {
|
31
|
+
case 0:
|
32
|
+
_context.next = 2;
|
33
|
+
return wait(10);
|
34
|
+
|
35
|
+
case 2:
|
36
|
+
elm.focus();
|
37
|
+
|
38
|
+
case 3:
|
39
|
+
case "end":
|
40
|
+
return _context.stop();
|
41
|
+
}
|
42
|
+
}
|
43
|
+
}, _callee);
|
44
|
+
}));
|
45
|
+
|
46
|
+
return function awaitFocus(_x) {
|
47
|
+
return _ref2.apply(this, arguments);
|
48
|
+
};
|
49
|
+
}();
|
50
|
+
|
21
51
|
if ((previousState === null || previousState === void 0 ? void 0 : previousState.currentStep) !== currentStep && currentStep > 0) {
|
22
|
-
|
23
|
-
|
52
|
+
if (firstFocusElement) {
|
53
|
+
var elm = document.querySelector(firstFocusElement);
|
24
54
|
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
var nextButton = document.querySelector(".".concat(blockClass, "__create-button"));
|
29
|
-
nextButton === null || nextButton === void 0 ? void 0 : nextButton.focus();
|
55
|
+
if (elm) {
|
56
|
+
awaitFocus(elm);
|
57
|
+
}
|
30
58
|
}
|
31
59
|
}
|
32
|
-
}, [currentStep, previousState, blockClass, onMount]);
|
60
|
+
}, [currentStep, previousState, blockClass, onMount, firstFocusElement]);
|
33
61
|
};
|
@@ -201,7 +201,7 @@ var AddSelectBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
201
201
|
};
|
202
202
|
|
203
203
|
var setShowBreadsCrumbs = function setShowBreadsCrumbs() {
|
204
|
-
if (
|
204
|
+
if (useNormalizedItems === false || searchTerm || globalFiltersApplied) {
|
205
205
|
return false;
|
206
206
|
}
|
207
207
|
|
@@ -30,6 +30,13 @@ var usePath = function usePath() {
|
|
30
30
|
path = _useState2[0],
|
31
31
|
setPath = _useState2[1];
|
32
32
|
|
33
|
+
(0, _react.useEffect)(function () {
|
34
|
+
setPath([{
|
35
|
+
id: 'base_of_path',
|
36
|
+
title: itemsLabel
|
37
|
+
}]);
|
38
|
+
}, [itemsLabel]);
|
39
|
+
|
33
40
|
var handler = function handler(id, title, parentId) {
|
34
41
|
if (path.find(function (entry) {
|
35
42
|
return entry.id === id;
|
@@ -35,7 +35,7 @@ var _hooks = require("../../global/js/hooks");
|
|
35
35
|
|
36
36
|
var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
|
37
37
|
|
38
|
-
var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "submitButtonText"];
|
38
|
+
var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "modalDangerButtonText", "modalDescription", "modalSecondaryButtonText", "modalTitle", "nextButtonText", "onClose", "onRequestSubmit", "firstFocusElement", "submitButtonText"];
|
39
39
|
|
40
40
|
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); }
|
41
41
|
|
@@ -65,6 +65,7 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
65
65
|
nextButtonText = _ref.nextButtonText,
|
66
66
|
onClose = _ref.onClose,
|
67
67
|
onRequestSubmit = _ref.onRequestSubmit,
|
68
|
+
firstFocusElement = _ref.firstFocusElement,
|
68
69
|
submitButtonText = _ref.submitButtonText,
|
69
70
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
70
71
|
|
@@ -146,7 +147,8 @@ var CreateFullPage = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
146
147
|
previousState: previousState,
|
147
148
|
currentStep: currentStep,
|
148
149
|
blockClass: blockClass,
|
149
|
-
onMount: onMount
|
150
|
+
onMount: onMount,
|
151
|
+
firstFocusElement: firstFocusElement
|
150
152
|
});
|
151
153
|
(0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
|
152
154
|
(0, _hooks.useCreateComponentStepChange)({
|
@@ -269,6 +271,11 @@ CreateFullPage.propTypes = {
|
|
269
271
|
*/
|
270
272
|
className: _propTypes.default.string,
|
271
273
|
|
274
|
+
/**
|
275
|
+
* Specifies elements to focus on first on render.
|
276
|
+
*/
|
277
|
+
firstFocusElement: _propTypes.default.string,
|
278
|
+
|
272
279
|
/**
|
273
280
|
* The primary 'danger' button text in the modal
|
274
281
|
*/
|
@@ -39,7 +39,7 @@ var _lastIndexInArray = require("../../global/js/utils/lastIndexInArray");
|
|
39
39
|
|
40
40
|
var _getNumberOfHiddenSteps = require("../../global/js/utils/getNumberOfHiddenSteps");
|
41
41
|
|
42
|
-
var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "submitButtonText", "title", "verticalPosition"];
|
42
|
+
var _excluded = ["backButtonText", "cancelButtonText", "children", "className", "description", "influencerWidth", "initialStep", "label", "nextButtonText", "onClose", "onRequestSubmit", "open", "firstFocusElement", "submitButtonText", "title", "verticalPosition"];
|
43
43
|
|
44
44
|
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); }
|
45
45
|
|
@@ -75,6 +75,7 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
75
75
|
onClose = _ref.onClose,
|
76
76
|
onRequestSubmit = _ref.onRequestSubmit,
|
77
77
|
open = _ref.open,
|
78
|
+
firstFocusElement = _ref.firstFocusElement,
|
78
79
|
submitButtonText = _ref.submitButtonText,
|
79
80
|
title = _ref.title,
|
80
81
|
_ref$verticalPosition = _ref.verticalPosition,
|
@@ -159,7 +160,8 @@ var CreateTearsheet = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
159
160
|
previousState: previousState,
|
160
161
|
currentStep: currentStep,
|
161
162
|
blockClass: blockClass,
|
162
|
-
onMount: onMount
|
163
|
+
onMount: onMount,
|
164
|
+
firstFocusElement: firstFocusElement
|
163
165
|
});
|
164
166
|
(0, _hooks.useValidCreateStepCount)(stepData.length, componentName);
|
165
167
|
(0, _hooks.useResetCreateComponent)({
|
@@ -290,6 +292,11 @@ CreateTearsheet.propTypes = {
|
|
290
292
|
*/
|
291
293
|
description: _propTypes.default.node,
|
292
294
|
|
295
|
+
/**
|
296
|
+
* Specifies elements to focus on first on render.
|
297
|
+
*/
|
298
|
+
firstFocusElement: _propTypes.default.string,
|
299
|
+
|
293
300
|
/**
|
294
301
|
* Used to set the size of the influencer
|
295
302
|
*/
|
@@ -64,6 +64,7 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
|
|
64
64
|
cancelButtonText = _ref2.cancelButtonText,
|
65
65
|
className = _ref2.className,
|
66
66
|
description = _ref2.description,
|
67
|
+
firstFocusElement = _ref2.firstFocusElement,
|
67
68
|
influencerWidth = _ref2.influencerWidth,
|
68
69
|
label = _ref2.label,
|
69
70
|
nextButtonText = _ref2.nextButtonText,
|
@@ -165,7 +166,8 @@ var MultiStepTearsheet = function MultiStepTearsheet(_ref2) {
|
|
165
166
|
resolve();
|
166
167
|
}, simulatedDelay);
|
167
168
|
});
|
168
|
-
}
|
169
|
+
},
|
170
|
+
firstFocusElement: firstFocusElement
|
169
171
|
}, /*#__PURE__*/_react.default.createElement(_CreateTearsheetStep.CreateTearsheetStep, {
|
170
172
|
onNext: function onNext() {
|
171
173
|
return new Promise(function (resolve, reject) {
|
@@ -45,6 +45,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
45
45
|
|
46
46
|
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; }
|
47
47
|
|
48
|
+
/**
|
49
|
+
* Copyright IBM Corp. 2022, 2022
|
50
|
+
*
|
51
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
52
|
+
* LICENSE file in the root directory of this source tree.
|
53
|
+
*/
|
48
54
|
var TableContainer = _react2.DataTable.TableContainer,
|
49
55
|
Table = _react2.DataTable.Table;
|
50
56
|
var blockClass = "".concat(_settings.pkg.prefix, "--datagrid");
|
@@ -64,7 +70,7 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
64
70
|
withVirtualScroll = datagridState.withVirtualScroll,
|
65
71
|
DatagridPagination = datagridState.DatagridPagination,
|
66
72
|
isFetching = datagridState.isFetching,
|
67
|
-
|
73
|
+
CustomizeColumnsTearsheet = datagridState.CustomizeColumnsTearsheet,
|
68
74
|
leftPanel = datagridState.leftPanel,
|
69
75
|
fullHeightDatagrid = datagridState.fullHeightDatagrid,
|
70
76
|
_datagridState$vertic = datagridState.verticalAlign,
|
@@ -162,7 +168,7 @@ var DatagridContent = function DatagridContent(_ref) {
|
|
162
168
|
}, renderTable()) : withVirtualScroll ? /*#__PURE__*/_react.default.createElement("div", {
|
163
169
|
className: "".concat(blockClass, "__virtualScrollContainer"),
|
164
170
|
ref: gridRef
|
165
|
-
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState),
|
171
|
+
}, renderTable()) : renderTable())), (rows === null || rows === void 0 ? void 0 : rows.length) > 0 && !isFetching && DatagridPagination && /*#__PURE__*/_react.default.createElement(DatagridPagination, datagridState), CustomizeColumnsTearsheet && /*#__PURE__*/_react.default.createElement(CustomizeColumnsTearsheet, {
|
166
172
|
instance: datagridState
|
167
173
|
}));
|
168
174
|
};
|
@@ -174,7 +180,7 @@ DatagridContent.propTypes = {
|
|
174
180
|
withVirtualScroll: _propTypes.default.bool,
|
175
181
|
DatagridActions: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
|
176
182
|
DatagridPagination: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
|
177
|
-
|
183
|
+
CustomizeColumnsTearsheet: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.func]),
|
178
184
|
isFetching: _propTypes.default.bool,
|
179
185
|
leftPanel: _propTypes.default.object,
|
180
186
|
fullHeightDatagrid: _propTypes.default.bool,
|