@carbon/ibm-products 2.10.1 → 2.11.0
Sign up to get free protection for your applications and to get access to all the features.
- package/README.md +7 -0
- package/css/index-full-carbon.css +72 -26
- package/css/index-full-carbon.css.map +1 -1
- package/css/index-full-carbon.min.css +3 -3
- 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.map +1 -1
- package/css/index-without-carbon.css +72 -26
- package/css/index-without-carbon.css.map +1 -1
- package/css/index-without-carbon.min.css +3 -3
- package/css/index-without-carbon.min.css.map +1 -1
- package/css/index.css +69 -25
- 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/APIKeyModal/APIKeyModal.js +10 -3
- package/es/components/AboutModal/AboutModal.js +10 -3
- package/es/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +17 -5
- package/es/components/CreateModal/CreateModal.js +10 -3
- package/es/components/Datagrid/Datagrid/DatagridContent.js +9 -7
- package/es/components/Datagrid/Datagrid/DatagridEmptyBody.js +5 -3
- package/es/components/Datagrid/Datagrid/DatagridExpandedRow.js +26 -13
- package/es/components/Datagrid/Datagrid/DatagridRow.js +47 -40
- package/es/components/Datagrid/Datagrid/DraggableElement.js +36 -132
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +17 -49
- package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +125 -40
- package/es/components/Datagrid/useActionsColumn.js +5 -3
- package/es/components/Datagrid/useExpandedRow.js +1 -1
- package/es/components/Datagrid/utils/DatagridPagination.js +1 -1
- package/es/components/EmptyStates/EmptyState.js +1 -1
- package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
- package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
- package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
- package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
- package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
- package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
- package/es/components/EmptyStates/assets/ErrorIllustration.js +6 -11
- package/es/components/EmptyStates/assets/NoDataIllustration.js +6 -11
- package/es/components/EmptyStates/assets/NoTagsIllustration.js +6 -12
- package/es/components/EmptyStates/assets/NotFoundIllustration.js +6 -12
- package/es/components/EmptyStates/assets/NotificationsIllustration.js +6 -12
- package/es/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -12
- package/es/components/ExportModal/ExportModal.js +10 -3
- package/es/components/ImportModal/ImportModal.js +10 -3
- package/es/components/RemoveModal/RemoveModal.js +10 -3
- package/es/components/TagSet/TagSet.js +5 -21
- package/es/components/TagSet/TagSetModal.js +7 -3
- package/es/components/Tearsheet/TearsheetShell.js +12 -26
- package/es/components/index.js +1 -1
- package/es/global/decorators/sidePanelDecorator.js +7 -0
- package/es/global/js/hooks/usePortalTarget.js +30 -0
- package/es/global/js/hooks/useWindowScroll.js +5 -0
- package/es/global/js/package-settings.js +1 -1
- package/es/global/js/utils/getNodeTextContent.js +47 -0
- package/flags.js +6 -0
- package/lib/components/APIKeyModal/APIKeyModal.js +10 -3
- package/lib/components/AboutModal/AboutModal.js +10 -3
- package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js +17 -5
- package/lib/components/CreateModal/CreateModal.js +10 -3
- package/lib/components/Datagrid/Datagrid/DatagridContent.js +9 -7
- package/lib/components/Datagrid/Datagrid/DatagridEmptyBody.js +4 -2
- package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js +26 -13
- package/lib/components/Datagrid/Datagrid/DatagridRow.js +46 -41
- package/lib/components/Datagrid/Datagrid/DraggableElement.js +37 -137
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/Columns.js +20 -49
- package/lib/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js +130 -47
- package/lib/components/Datagrid/useActionsColumn.js +5 -3
- package/lib/components/Datagrid/useExpandedRow.js +1 -1
- package/lib/components/Datagrid/utils/DatagridPagination.js +1 -1
- package/lib/components/EmptyStates/EmptyState.js +1 -1
- package/lib/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js +1 -1
- package/lib/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js +1 -1
- package/lib/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js +1 -1
- package/lib/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js +1 -1
- package/lib/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js +1 -1
- package/lib/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js +1 -1
- package/lib/components/EmptyStates/assets/ErrorIllustration.js +6 -11
- package/lib/components/EmptyStates/assets/NoDataIllustration.js +6 -11
- package/lib/components/EmptyStates/assets/NoTagsIllustration.js +6 -12
- package/lib/components/EmptyStates/assets/NotFoundIllustration.js +6 -12
- package/lib/components/EmptyStates/assets/NotificationsIllustration.js +6 -12
- package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js +6 -12
- package/lib/components/ExportModal/ExportModal.js +10 -3
- package/lib/components/ImportModal/ImportModal.js +10 -3
- package/lib/components/RemoveModal/RemoveModal.js +10 -3
- package/lib/components/TagSet/TagSet.js +5 -21
- package/lib/components/TagSet/TagSetModal.js +7 -3
- package/lib/components/Tearsheet/TearsheetShell.js +12 -26
- package/lib/components/index.js +6 -0
- package/lib/global/decorators/sidePanelDecorator.js +7 -0
- package/lib/global/js/hooks/usePortalTarget.js +38 -0
- package/lib/global/js/hooks/useWindowScroll.js +6 -0
- package/lib/global/js/package-settings.js +1 -1
- package/lib/global/js/utils/getNodeTextContent.js +55 -0
- package/package.json +11 -7
- package/scss/components/ActionSet/_action-set.scss +2 -1
- package/scss/components/Datagrid/styles/_datagrid.scss +11 -6
- package/scss/components/Datagrid/styles/_draggableElement.scss +34 -16
- package/scss/components/Datagrid/styles/_useExpandedRow.scss +13 -0
- package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss +1 -1
- package/scss/components/Datagrid/styles/addons/_FilterFlyout.scss +22 -11
- package/scss/components/Datagrid/styles/addons/_FilterPanel.scss +6 -3
- package/scss/components/FilterSummary/_filter-summary.scss +2 -1
- package/scss/global/decorators/_side-panel-decorator.scss +7 -0
- package/scss/global/js/utils/_story-as-full-page.scss +0 -6
@@ -28,13 +28,14 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
|
|
28
28
|
size = _ref.size,
|
29
29
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
30
30
|
var svgId = (0, _uuidv.default)();
|
31
|
-
return
|
31
|
+
return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
|
32
32
|
xmlns: "http://www.w3.org/2000/svg",
|
33
33
|
width: 80,
|
34
34
|
height: 80,
|
35
35
|
viewBox: "0 0 80 80",
|
36
|
-
className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
|
37
|
-
|
36
|
+
className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notFound"), "".concat(blockClass, "__illustration--").concat(size)]),
|
37
|
+
role: "img"
|
38
|
+
}), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
|
38
39
|
id: "prefix__a_dark_".concat(svgId),
|
39
40
|
x1: 2.6,
|
40
41
|
y1: -12.81,
|
@@ -185,14 +186,7 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
|
|
185
186
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
186
187
|
d: "M57 37.5c0-12-8.75-26.85-19.56-33.08C31.82 1.16 26.73.89 23.16 3.09l-4.83 2.78 1.19 1.94c3.25-1.74 7.72-1.38 12.67 1.47C42.09 15 50.11 28.57 50.11 39.6c0 4.86-1.55 8.4-4.11 10.4-.12.1-1.17.73-1.31.82l2.12 1.42 4.83-2.79C55 47.44 57 43.34 57 37.5",
|
187
188
|
fill: "url(#prefix__f_dark_".concat(svgId, ")")
|
188
|
-
})) : /*#__PURE__*/_react.default.createElement("
|
189
|
-
xmlns: "http://www.w3.org/2000/svg",
|
190
|
-
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
191
|
-
width: 80,
|
192
|
-
height: 80,
|
193
|
-
viewBox: "0 0 80 80",
|
194
|
-
className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
|
195
|
-
}), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
|
189
|
+
})) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
|
196
190
|
id: "prefix__a_".concat(svgId),
|
197
191
|
x1: 2.6,
|
198
192
|
y1: -12.81,
|
@@ -362,7 +356,7 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
|
|
362
356
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
363
357
|
d: "M57 37.5c0-12-8.75-26.85-19.56-33.08C31.82 1.16 26.73.89 23.16 3.09l-4.83 2.78 1.19 1.94c3.25-1.74 7.72-1.38 12.67 1.47C42.09 15 50.11 28.57 50.11 39.6c0 4.86-1.55 8.4-4.11 10.4-.12.1-1.17.73-1.31.82l2.12 1.42 4.83-2.79C55 47.44 57 43.34 57 37.5",
|
364
358
|
fill: "url(#prefix__g_".concat(svgId, ")")
|
365
|
-
}));
|
359
|
+
})));
|
366
360
|
};
|
367
361
|
exports.NotFoundIllustration = NotFoundIllustration;
|
368
362
|
NotFoundIllustration.propTypes = {
|
@@ -28,13 +28,14 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
|
|
28
28
|
size = _ref.size,
|
29
29
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
30
30
|
var svgId = (0, _uuidv.default)();
|
31
|
-
return
|
31
|
+
return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
|
32
32
|
xmlns: "http://www.w3.org/2000/svg",
|
33
33
|
width: 80,
|
34
34
|
height: 80,
|
35
35
|
viewBox: "0 0 80 80",
|
36
|
-
className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
|
37
|
-
|
36
|
+
className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
|
37
|
+
role: "img"
|
38
|
+
}), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
|
38
39
|
id: "prefix__a_dark_".concat(svgId),
|
39
40
|
x1: 30.05,
|
40
41
|
y1: 54.31,
|
@@ -130,14 +131,7 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
|
|
130
131
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
131
132
|
d: "M60.76 30.55a2.54 2.54 0 01.14.8v3.95l.41-.13v-3.82a3.54 3.54 0 00-1.63-2.82L16.86 3.8a2.09 2.09 0 00-.44-.19l-.78.45a1 1 0 01.21-.06h.48l.27.12 21.47 12.4 21.41 12.36a3.19 3.19 0 011.28 1.67z",
|
132
133
|
fill: "url(#prefix__d_dark_".concat(svgId, ")")
|
133
|
-
})) : /*#__PURE__*/_react.default.createElement("
|
134
|
-
xmlns: "http://www.w3.org/2000/svg",
|
135
|
-
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
136
|
-
width: 80,
|
137
|
-
height: 80,
|
138
|
-
viewBox: "0 0 80 80",
|
139
|
-
className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
|
140
|
-
}), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
|
134
|
+
})) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
|
141
135
|
id: "prefix__a_".concat(svgId),
|
142
136
|
x1: 61.44,
|
143
137
|
y1: 66.99,
|
@@ -333,7 +327,7 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
|
|
333
327
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
334
328
|
d: "M60.76 30.55a2.54 2.54 0 01.14.8v3.95l.41-.13v-3.82a3.54 3.54 0 00-1.63-2.82L16.86 3.8a2.09 2.09 0 00-.44-.19l-.78.45a1 1 0 01.21-.06h.48l.27.12 21.47 12.4 21.41 12.36a3.19 3.19 0 011.28 1.67z",
|
335
329
|
fill: "url(#prefix__k_".concat(svgId, ")")
|
336
|
-
}));
|
330
|
+
})));
|
337
331
|
};
|
338
332
|
exports.NotificationsIllustration = NotificationsIllustration;
|
339
333
|
NotificationsIllustration.propTypes = {
|
@@ -28,14 +28,15 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
|
|
28
28
|
size = _ref.size,
|
29
29
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
30
30
|
var svgId = (0, _uuidv.default)();
|
31
|
-
return
|
31
|
+
return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
|
32
32
|
xmlns: "http://www.w3.org/2000/svg",
|
33
33
|
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
34
34
|
width: 80,
|
35
35
|
height: 80,
|
36
36
|
viewBox: "0 0 80 80",
|
37
|
-
className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
|
38
|
-
|
37
|
+
className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-unauthorized"), "".concat(blockClass, "__illustration--").concat(size)]),
|
38
|
+
role: "img"
|
39
|
+
}), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
|
39
40
|
id: "prefix__b_dark_".concat(svgId),
|
40
41
|
x1: 17.33,
|
41
42
|
y1: 40.68,
|
@@ -118,14 +119,7 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
|
|
118
119
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
119
120
|
d: "M51.41 38.51a1.9 1.9 0 00-.64-.65l-1.1-.63-28.49-16.45-.1-.05-.61.35a.33.33 0 01.17 0 .6.6 0 01.32.1l28.5 16.41 1.1.63a1.5 1.5 0 01.49.51s.05.09.08.14l.36-.21z",
|
120
121
|
fill: "#6f6f6f"
|
121
|
-
})) : /*#__PURE__*/_react.default.createElement("
|
122
|
-
xmlns: "http://www.w3.org/2000/svg",
|
123
|
-
xmlnsXlink: "http://www.w3.org/1999/xlink",
|
124
|
-
width: 80,
|
125
|
-
height: 80,
|
126
|
-
viewBox: "0 0 80 80",
|
127
|
-
className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
|
128
|
-
}), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
|
122
|
+
})) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
|
129
123
|
id: "prefix__b",
|
130
124
|
x1: 27.98,
|
131
125
|
y1: 73.72,
|
@@ -306,7 +300,7 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
|
|
306
300
|
}), /*#__PURE__*/_react.default.createElement("path", {
|
307
301
|
d: "M51.41 38.51a1.9 1.9 0 00-.64-.65l-1.1-.63-28.49-16.45-.1-.05-.61.35a.33.33 0 01.17 0 .6.6 0 01.32.1l28.5 16.41 1.1.63a1.5 1.5 0 01.49.51s.05.09.08.14l.36-.21z",
|
308
302
|
fill: "url(#prefix__h_".concat(svgId, ")")
|
309
|
-
}));
|
303
|
+
})));
|
310
304
|
};
|
311
305
|
exports.UnauthorizedIllustration = UnauthorizedIllustration;
|
312
306
|
UnauthorizedIllustration.propTypes = {
|
@@ -18,7 +18,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
18
18
|
var _devtools = require("../../global/js/utils/devtools");
|
19
19
|
var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
|
20
20
|
var _settings = require("../../settings");
|
21
|
-
var
|
21
|
+
var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
|
22
|
+
var _excluded = ["body", "className", "error", "errorMessage", "filename", "hidePasswordLabel", "inputLabel", "inputType", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "portalTarget", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "showPasswordLabel", "successMessage", "successful", "title", "validExtensions"]; //
|
22
23
|
// Copyright IBM Corp. 2020, 2021
|
23
24
|
//
|
24
25
|
// This source code is licensed under the Apache-2.0 license found in the
|
@@ -56,6 +57,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
56
57
|
onClose = _ref.onClose,
|
57
58
|
onRequestSubmit = _ref.onRequestSubmit,
|
58
59
|
open = _ref.open,
|
60
|
+
portalTargetIn = _ref.portalTarget,
|
59
61
|
_ref$preformattedExte = _ref.preformattedExtensions,
|
60
62
|
preformattedExtensions = _ref$preformattedExte === void 0 ? defaults.preformattedExtensions : _ref$preformattedExte,
|
61
63
|
preformattedExtensionsLabel = _ref.preformattedExtensionsLabel,
|
@@ -81,6 +83,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
81
83
|
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
82
84
|
extension = _useState6[0],
|
83
85
|
setExtension = _useState6[1];
|
86
|
+
var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
|
84
87
|
(0, _react.useEffect)(function () {
|
85
88
|
var _preformattedExtensio;
|
86
89
|
setName(filename);
|
@@ -125,7 +128,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
125
128
|
invalidText: invalidInputText,
|
126
129
|
onBlur: onBlurHandler
|
127
130
|
}, 'data-modal-primary-focus', true);
|
128
|
-
return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
|
131
|
+
return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
|
129
132
|
className: (0, _classnames.default)(blockClass, className),
|
130
133
|
"aria-label": title,
|
131
134
|
size: "sm",
|
@@ -185,7 +188,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
185
188
|
kind: "primary",
|
186
189
|
onClick: onSubmitHandler,
|
187
190
|
disabled: primaryButtonDisabled
|
188
|
-
}, primaryButtonText)));
|
191
|
+
}, primaryButtonText))));
|
189
192
|
});
|
190
193
|
|
191
194
|
// Return a placeholder if not released and not enabled by feature flag
|
@@ -248,6 +251,10 @@ ExportModal.propTypes = {
|
|
248
251
|
* Specify whether the Modal is currently open
|
249
252
|
*/
|
250
253
|
open: _propTypes.default.bool,
|
254
|
+
/**
|
255
|
+
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
256
|
+
*/
|
257
|
+
portalTarget: _propTypes.default.node,
|
251
258
|
/**
|
252
259
|
* Array of extensions to display as radio buttons
|
253
260
|
*/
|
@@ -19,9 +19,10 @@ var _react2 = require("@carbon/react");
|
|
19
19
|
var _classnames = _interopRequireDefault(require("classnames"));
|
20
20
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
21
21
|
var _devtools = require("../../global/js/utils/devtools");
|
22
|
+
var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
|
22
23
|
var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
|
23
24
|
var _settings = require("../../settings");
|
24
|
-
var _excluded = ["accept", "className", "defaultErrorBody", "defaultErrorHeader", "description", "fetchErrorBody", "fetchErrorHeader", "fileDropHeader", "fileDropLabel", "fileUploadLabel", "inputButtonIcon", "inputButtonText", "inputId", "inputLabel", "inputPlaceholder", "invalidFileTypeErrorBody", "invalidFileTypeErrorHeader", "invalidIconDescription", "maxFileSize", "maxFileSizeErrorBody", "maxFileSizeErrorHeader", "onClose", "onRequestSubmit", "open", "primaryButtonText", "secondaryButtonText", "title"]; //
|
25
|
+
var _excluded = ["accept", "className", "defaultErrorBody", "defaultErrorHeader", "description", "fetchErrorBody", "fetchErrorHeader", "fileDropHeader", "fileDropLabel", "fileUploadLabel", "inputButtonIcon", "inputButtonText", "inputId", "inputLabel", "inputPlaceholder", "invalidFileTypeErrorBody", "invalidFileTypeErrorHeader", "invalidIconDescription", "maxFileSize", "maxFileSizeErrorBody", "maxFileSizeErrorHeader", "onClose", "onRequestSubmit", "open", "portalTarget", "primaryButtonText", "secondaryButtonText", "title"]; //
|
25
26
|
// Copyright IBM Corp. 2021, 2021
|
26
27
|
//
|
27
28
|
// This source code is licensed under the Apache-2.0 license found in the
|
@@ -64,6 +65,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
64
65
|
onClose = _ref.onClose,
|
65
66
|
onRequestSubmit = _ref.onRequestSubmit,
|
66
67
|
open = _ref.open,
|
68
|
+
portalTargetIn = _ref.portalTarget,
|
67
69
|
primaryButtonText = _ref.primaryButtonText,
|
68
70
|
secondaryButtonText = _ref.secondaryButtonText,
|
69
71
|
title = _ref.title,
|
@@ -77,6 +79,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
77
79
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
78
80
|
importUrl = _useState4[0],
|
79
81
|
setImportUrl = _useState4[1];
|
82
|
+
var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
|
80
83
|
var isInvalidFileType = function isInvalidFileType(file) {
|
81
84
|
var acceptSet = new Set(accept);
|
82
85
|
var name = file.name;
|
@@ -201,7 +204,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
201
204
|
var importButtonDisabled = !importUrl || hasFiles;
|
202
205
|
var fileStatusString = "".concat(numberOfValidFiles, " / ").concat(numberOfFiles, " ").concat(fileUploadLabel);
|
203
206
|
var blockClass = "".concat(_settings.pkg.prefix, "--import-modal");
|
204
|
-
return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, _objectSpread({
|
207
|
+
return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, _objectSpread({
|
205
208
|
open: open,
|
206
209
|
ref: ref
|
207
210
|
}, (0, _devtools.getDevtoolsProps)(componentName)), {
|
@@ -278,7 +281,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
278
281
|
kind: "primary",
|
279
282
|
onClick: onSubmitHandler,
|
280
283
|
disabled: primaryButtonDisabled
|
281
|
-
}, primaryButtonText)));
|
284
|
+
}, primaryButtonText))));
|
282
285
|
});
|
283
286
|
|
284
287
|
// Return a placeholder if not released and not enabled by feature flag
|
@@ -381,6 +384,10 @@ ImportModal.propTypes = {
|
|
381
384
|
* Specify whether the Modal is currently open
|
382
385
|
*/
|
383
386
|
open: _propTypes.default.bool.isRequired,
|
387
|
+
/**
|
388
|
+
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
389
|
+
*/
|
390
|
+
portalTarget: _propTypes.default.node,
|
384
391
|
/**
|
385
392
|
* Specify the text for the primary button
|
386
393
|
*/
|
@@ -18,7 +18,8 @@ var _devtools = require("../../global/js/utils/devtools");
|
|
18
18
|
var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
|
19
19
|
var _settings = require("../../settings");
|
20
20
|
var _hooks = require("../../global/js/hooks");
|
21
|
-
var
|
21
|
+
var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
|
22
|
+
var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"]; //
|
22
23
|
// Copyright IBM Corp. 2020, 2021
|
23
24
|
//
|
24
25
|
// This source code is licensed under the Apache-2.0 license found in the
|
@@ -46,6 +47,7 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
46
47
|
onClose = _ref.onClose,
|
47
48
|
onRequestSubmit = _ref.onRequestSubmit,
|
48
49
|
open = _ref.open,
|
50
|
+
portalTargetIn = _ref.portalTarget,
|
49
51
|
preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
|
50
52
|
primaryButtonDisabled = _ref.primaryButtonDisabled,
|
51
53
|
primaryButtonText = _ref.primaryButtonText,
|
@@ -62,6 +64,7 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
62
64
|
userInput = _useState2[0],
|
63
65
|
setUserInput = _useState2[1];
|
64
66
|
var idRef = (0, _react.useRef)((0, _uuidv.default)());
|
67
|
+
var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
|
65
68
|
var onChangeHandler = function onChangeHandler(e) {
|
66
69
|
setUserInput(e.target.value);
|
67
70
|
};
|
@@ -85,7 +88,7 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
85
88
|
setUserInput('');
|
86
89
|
}
|
87
90
|
}, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
|
88
|
-
return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
|
91
|
+
return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
|
89
92
|
className: (0, _classnames.default)(blockClass, className),
|
90
93
|
size: "sm",
|
91
94
|
"aria-label": title
|
@@ -119,7 +122,7 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
119
122
|
kind: "danger",
|
120
123
|
onClick: onRequestSubmit,
|
121
124
|
disabled: primaryButtonStatus
|
122
|
-
}, primaryButtonText)));
|
125
|
+
}, primaryButtonText))));
|
123
126
|
});
|
124
127
|
|
125
128
|
// Return a placeholder if not released and not enabled by feature flag
|
@@ -166,6 +169,10 @@ RemoveModal.propTypes = {
|
|
166
169
|
* Specify whether the Modal is currently open
|
167
170
|
*/
|
168
171
|
open: _propTypes.default.bool.isRequired,
|
172
|
+
/**
|
173
|
+
* The DOM node the tearsheet should be rendered within. Defaults to document.body.
|
174
|
+
*/
|
175
|
+
portalTarget: _propTypes.default.node,
|
169
176
|
/**
|
170
177
|
* Prevent closing on click outside of modal
|
171
178
|
*/
|
@@ -11,7 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
|
|
11
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
12
12
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
13
13
|
var _react = _interopRequireWildcard(require("react"));
|
14
|
-
var _reactDom = require("react-dom");
|
15
14
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
16
15
|
var _classnames = _interopRequireDefault(require("classnames"));
|
17
16
|
var _TagSetOverflow = require("./TagSetOverflow");
|
@@ -40,13 +39,12 @@ var allTagsModalSearchThreshold = 10;
|
|
40
39
|
// Default values for props
|
41
40
|
var defaults = {
|
42
41
|
align: 'start',
|
43
|
-
// allTagsModalTarget: document.body,
|
44
42
|
overflowAlign: 'bottom'
|
45
43
|
};
|
46
44
|
var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
47
45
|
var _ref$align = _ref.align,
|
48
46
|
align = _ref$align === void 0 ? defaults.align : _ref$align,
|
49
|
-
|
47
|
+
allTagsModalTarget = _ref.allTagsModalTarget,
|
50
48
|
className = _ref.className,
|
51
49
|
maxVisible = _ref.maxVisible,
|
52
50
|
multiline = _ref.multiline,
|
@@ -84,22 +82,9 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
84
82
|
sizingTags = _useState10[0],
|
85
83
|
setSizingTags = _useState10[1];
|
86
84
|
var overflowTag = (0, _react.useRef)(null);
|
87
|
-
var _useState11 = (0, _react.useState)(null),
|
88
|
-
_useState12 = (0, _slicedToArray2.default)(_useState11, 2),
|
89
|
-
allTagsModalTarget = _useState12[0],
|
90
|
-
setAllTagsModalTarget = _useState12[1];
|
91
85
|
var handleShowAllClick = function handleShowAllClick() {
|
92
86
|
setShowAllModalOpen(true);
|
93
87
|
};
|
94
|
-
(0, _react.useEffect)(function () {
|
95
|
-
if (allTagsModalTargetIn) {
|
96
|
-
setAllTagsModalTarget(allTagsModalTargetIn);
|
97
|
-
} else {
|
98
|
-
if (_settings.pkg.isFeatureEnabled('default-portal-target-body')) {
|
99
|
-
setAllTagsModalTarget(document.body);
|
100
|
-
}
|
101
|
-
}
|
102
|
-
}, [allTagsModalTargetIn]);
|
103
88
|
(0, _react.useEffect)(function () {
|
104
89
|
var newSizingTags = [];
|
105
90
|
// create sizing tags
|
@@ -219,16 +204,15 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
|
|
219
204
|
}, hiddenSizingTags), /*#__PURE__*/_react.default.createElement("div", {
|
220
205
|
className: (0, _classnames.default)(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
|
221
206
|
ref: displayedArea
|
222
|
-
}, displayedTags)), (
|
223
|
-
return children;
|
224
|
-
})( /*#__PURE__*/_react.default.createElement(_TagSetModal.TagSetModal, {
|
207
|
+
}, displayedTags)), /*#__PURE__*/_react.default.createElement(_TagSetModal.TagSetModal, {
|
225
208
|
allTags: tags,
|
226
209
|
open: showAllModalOpen,
|
227
210
|
title: allTagsModalTitle,
|
228
211
|
onClose: handleModalClose,
|
229
212
|
searchLabel: allTagsModalSearchLabel,
|
230
|
-
searchPlaceholder: allTagsModalSearchPlaceholderText
|
231
|
-
|
213
|
+
searchPlaceholder: allTagsModalSearchPlaceholderText,
|
214
|
+
portalTarget: allTagsModalTarget
|
215
|
+
}));
|
232
216
|
});
|
233
217
|
|
234
218
|
// Return a placeholder if not released and not enabled by feature flag
|
@@ -16,7 +16,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
|
|
16
16
|
var _react2 = require("@carbon/react");
|
17
17
|
var _settings = require("../../settings");
|
18
18
|
var _propsHelper = require("../../global/js/utils/props-helper");
|
19
|
-
var
|
19
|
+
var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
|
20
|
+
var _excluded = ["allTags", "className", "title", "onClose", "open", "portalTarget", "searchLabel", "searchPlaceholder"],
|
20
21
|
_excluded2 = ["label"]; //
|
21
22
|
// Copyright IBM Corp. 2021, 2020
|
22
23
|
//
|
@@ -41,6 +42,7 @@ var TagSetModal = function TagSetModal(_ref) {
|
|
41
42
|
title = _ref.title,
|
42
43
|
onClose = _ref.onClose,
|
43
44
|
open = _ref.open,
|
45
|
+
portalTargetIn = _ref.portalTarget,
|
44
46
|
_ref$searchLabel = _ref.searchLabel,
|
45
47
|
searchLabel = _ref$searchLabel === void 0 ? defaults.searchLabel : _ref$searchLabel,
|
46
48
|
searchPlaceholder = _ref.searchPlaceholder,
|
@@ -53,6 +55,7 @@ var TagSetModal = function TagSetModal(_ref) {
|
|
53
55
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
54
56
|
search = _useState4[0],
|
55
57
|
setSearch = _useState4[1];
|
58
|
+
var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
|
56
59
|
(0, _react.useEffect)(function () {
|
57
60
|
var newFilteredModalTags = [];
|
58
61
|
if (open) {
|
@@ -75,7 +78,7 @@ var TagSetModal = function TagSetModal(_ref) {
|
|
75
78
|
var handleSearch = function handleSearch(ev) {
|
76
79
|
setSearch(ev.target.value || '');
|
77
80
|
};
|
78
|
-
return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
|
81
|
+
return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
|
79
82
|
containerClassName: "".concat(blockClass, "__container"),
|
80
83
|
className: (0, _classnames.default)(className, "".concat(blockClass)),
|
81
84
|
size: "sm",
|
@@ -104,7 +107,7 @@ var TagSetModal = function TagSetModal(_ref) {
|
|
104
107
|
}), label);
|
105
108
|
})), /*#__PURE__*/_react.default.createElement("div", {
|
106
109
|
className: "".concat(blockClass, "__fade")
|
107
|
-
}));
|
110
|
+
})));
|
108
111
|
};
|
109
112
|
exports.TagSetModal = TagSetModal;
|
110
113
|
TagSetModal.propTypes = {
|
@@ -114,6 +117,7 @@ TagSetModal.propTypes = {
|
|
114
117
|
className: _propTypes.default.string,
|
115
118
|
onClose: _propTypes.default.func,
|
116
119
|
open: _propTypes.default.bool,
|
120
|
+
portalTarget: _propTypes.default.node,
|
117
121
|
searchLabel: _propTypes.default.string,
|
118
122
|
searchPlaceholder: _propTypes.default.string,
|
119
123
|
title: _propTypes.default.string
|
@@ -11,15 +11,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
11
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
12
12
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
13
13
|
var _react = _interopRequireWildcard(require("react"));
|
14
|
-
var _reactDom = require("react-dom");
|
15
14
|
var _useResizeObserver2 = require("../../global/js/hooks/useResizeObserver");
|
16
15
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
17
16
|
var _classnames = _interopRequireDefault(require("classnames"));
|
18
17
|
var _settings = require("../../settings");
|
19
18
|
var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
|
19
|
+
var _getNodeTextContent = require("../../global/js/utils/getNodeTextContent");
|
20
20
|
var _react2 = require("@carbon/react");
|
21
21
|
var _ActionSet = require("../ActionSet");
|
22
22
|
var _Wrap = require("../../global/js/utils/Wrap");
|
23
|
+
var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
|
23
24
|
var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
|
24
25
|
/**
|
25
26
|
* Copyright IBM Corp. 2020, 2023
|
@@ -94,20 +95,7 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
94
95
|
rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
|
95
96
|
var carbonPrefix = (0, _react2.usePrefix)();
|
96
97
|
var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
|
97
|
-
|
98
|
-
var _useState = (0, _react.useState)(null),
|
99
|
-
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
100
|
-
portalTarget = _useState2[0],
|
101
|
-
setPortalTarget = _useState2[1];
|
102
|
-
(0, _react.useEffect)(function () {
|
103
|
-
if (portalTargetIn) {
|
104
|
-
setPortalTarget(portalTargetIn);
|
105
|
-
} else {
|
106
|
-
if (_settings.pkg.isFeatureEnabled('default-portal-target-body')) {
|
107
|
-
setPortalTarget(document.body);
|
108
|
-
}
|
109
|
-
}
|
110
|
-
}, [portalTargetIn]);
|
98
|
+
var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
|
111
99
|
var localRef = (0, _react.useRef)();
|
112
100
|
var resizer = (0, _react.useRef)(null);
|
113
101
|
var modalRef = ref || localRef;
|
@@ -116,14 +104,14 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
116
104
|
var wide = size === 'wide';
|
117
105
|
|
118
106
|
// Keep track of the stack depth and our position in it (1-based, 0=closed)
|
107
|
+
var _useState = (0, _react.useState)(0),
|
108
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
109
|
+
depth = _useState2[0],
|
110
|
+
setDepth = _useState2[1];
|
119
111
|
var _useState3 = (0, _react.useState)(0),
|
120
112
|
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
121
|
-
|
122
|
-
|
123
|
-
var _useState5 = (0, _react.useState)(0),
|
124
|
-
_useState6 = (0, _slicedToArray2.default)(_useState5, 2),
|
125
|
-
position = _useState6[0],
|
126
|
-
setPosition = _useState6[1];
|
113
|
+
position = _useState4[0],
|
114
|
+
setPosition = _useState4[1];
|
127
115
|
|
128
116
|
// Keep a record of the previous value of depth.
|
129
117
|
var prevDepth = (0, _react.useRef)();
|
@@ -208,10 +196,8 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
208
196
|
|
209
197
|
// Include an ActionSet if and only if one or more actions is given.
|
210
198
|
var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
|
211
|
-
return (
|
212
|
-
|
213
|
-
})( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
|
214
|
-
"aria-label": title,
|
199
|
+
return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
|
200
|
+
"aria-label": (0, _getNodeTextContent.getNodeTextContent)(title),
|
215
201
|
className: (0, _classnames.default)(bc, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
|
216
202
|
// Don't apply this on the initial open of a single tearsheet.
|
217
203
|
depth > 1 || depth === 1 && prevDepth.current > 1), (0, _defineProperty2.default)(_cx, "".concat(bc, "--wide"), wide), (0, _defineProperty2.default)(_cx, "".concat(bc, "--narrow"), !wide), _cx)),
|
@@ -275,7 +261,7 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
|
|
275
261
|
})))), /*#__PURE__*/_react.default.createElement("div", {
|
276
262
|
className: "".concat(bc, "__resize-detector"),
|
277
263
|
ref: resizer
|
278
|
-
}))
|
264
|
+
})));
|
279
265
|
} else {
|
280
266
|
_pconsole.default.warn('Tearsheet not rendered: maximum stacking depth exceeded.');
|
281
267
|
return null;
|
package/lib/components/index.js
CHANGED
@@ -117,6 +117,12 @@ Object.defineProperty(exports, "EditTearsheet", {
|
|
117
117
|
return _EditTearsheet.EditTearsheet;
|
118
118
|
}
|
119
119
|
});
|
120
|
+
Object.defineProperty(exports, "EditTearsheetForm", {
|
121
|
+
enumerable: true,
|
122
|
+
get: function get() {
|
123
|
+
return _EditTearsheet.EditTearsheetForm;
|
124
|
+
}
|
125
|
+
});
|
120
126
|
Object.defineProperty(exports, "EditTearsheetNarrow", {
|
121
127
|
enumerable: true,
|
122
128
|
get: function get() {
|
@@ -7,6 +7,13 @@ Object.defineProperty(exports, "__esModule", {
|
|
7
7
|
exports.sidePanelDecorator = void 0;
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
9
9
|
var _react2 = require("@carbon/react");
|
10
|
+
/**
|
11
|
+
* Copyright IBM Corp. 2023, 2023
|
12
|
+
*
|
13
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
14
|
+
* LICENSE file in the root directory of this source tree.
|
15
|
+
*/
|
16
|
+
|
10
17
|
var sidePanelDecorator = function sidePanelDecorator(renderHeader, prefix) {
|
11
18
|
return function (Story) {
|
12
19
|
return /*#__PURE__*/_react.default.createElement("div", {
|
@@ -0,0 +1,38 @@
|
|
1
|
+
"use strict";
|
2
|
+
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
5
|
+
value: true
|
6
|
+
});
|
7
|
+
exports.usePortalTarget = void 0;
|
8
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
9
|
+
var _react = require("react");
|
10
|
+
var _settings = require("../../../settings");
|
11
|
+
var _reactDom = require("react-dom");
|
12
|
+
/**
|
13
|
+
* Copyright IBM Corp. 2023, 2023
|
14
|
+
*
|
15
|
+
* This source code is licensed under the Apache-2.0 license found in the
|
16
|
+
* LICENSE file in the root directory of this source tree.
|
17
|
+
*/
|
18
|
+
|
19
|
+
var usePortalTarget = function usePortalTarget(portalTargetIn) {
|
20
|
+
var _useState = (0, _react.useState)(null),
|
21
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
22
|
+
portalTarget = _useState2[0],
|
23
|
+
setPortalTarget = _useState2[1];
|
24
|
+
(0, _react.useEffect)(function () {
|
25
|
+
if (portalTargetIn) {
|
26
|
+
setPortalTarget(portalTargetIn);
|
27
|
+
} else {
|
28
|
+
if (_settings.pkg.isFeatureEnabled('default-portal-target-body')) {
|
29
|
+
setPortalTarget(document.body);
|
30
|
+
}
|
31
|
+
}
|
32
|
+
}, [portalTargetIn]);
|
33
|
+
var renderPortalUse = (0, _react.useCallback)(function (children) {
|
34
|
+
return portalTarget ? /*#__PURE__*/(0, _reactDom.createPortal)(children, portalTarget) : children;
|
35
|
+
}, [portalTarget]);
|
36
|
+
return renderPortalUse;
|
37
|
+
};
|
38
|
+
exports.usePortalTarget = usePortalTarget;
|
@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
5
5
|
value: true
|
6
6
|
});
|
7
7
|
exports.useNearestScroll = useNearestScroll;
|
8
|
+
exports.useScroll = useScroll;
|
8
9
|
exports.useWindowScroll = useWindowScroll;
|
9
10
|
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
10
11
|
var _react = require("react");
|
@@ -83,4 +84,9 @@ function useNearestScroll(ref, effect, deps) {
|
|
83
84
|
scrollableTarget = window;
|
84
85
|
}
|
85
86
|
return useTargetScroll(scrollableTarget, effect, deps, throttle);
|
87
|
+
}
|
88
|
+
function useScroll(ref, effect, deps) {
|
89
|
+
var _ref$current;
|
90
|
+
var throttle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
|
91
|
+
return useTargetScroll((_ref$current = ref === null || ref === void 0 ? void 0 : ref.current) !== null && _ref$current !== void 0 ? _ref$current : null, effect, deps, throttle);
|
86
92
|
}
|
@@ -70,6 +70,7 @@ var defaults = {
|
|
70
70
|
DataSpreadsheet: false,
|
71
71
|
Datagrid: false,
|
72
72
|
EditTearsheet: false,
|
73
|
+
EditTearsheetForm: false,
|
73
74
|
EditTearsheetNarrow: false,
|
74
75
|
EditFullPage: false,
|
75
76
|
EditUpdateCards: false
|
@@ -78,7 +79,6 @@ var defaults = {
|
|
78
79
|
|
79
80
|
// feature level flags
|
80
81
|
feature: {
|
81
|
-
'a-new-feature': false,
|
82
82
|
'default-portal-target-body': true,
|
83
83
|
'Datagrid.useInfiniteScroll': false,
|
84
84
|
'Datagrid.useInlineEdit': false,
|