@carbon/ibm-products 2.10.2 → 2.11.0

package/lib/components/EmptyStates/assets/NotificationsIllustration.js

@@ -28,13 +28,14 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
-  return theme === 'dark' ? /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
     width: 80,
     height: 80,
     viewBox: "0 0 80 80",
-    className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
-  }), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+    className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
+    role: "img"
+  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 30.05,
     y1: 54.31,
@@ -130,14 +131,7 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
   }), /*#__PURE__*/_react.default.createElement("path", {
     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",
     fill: "url(#prefix__d_dark_".concat(svgId, ")")
-  })) : /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: 80,
-    height: 80,
-    viewBox: "0 0 80 80",
-    className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
-  }), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__a_".concat(svgId),
     x1: 61.44,
     y1: 66.99,
@@ -333,7 +327,7 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
   }), /*#__PURE__*/_react.default.createElement("path", {
     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",
     fill: "url(#prefix__k_".concat(svgId, ")")
-  }));
+  })));
 };
 exports.NotificationsIllustration = NotificationsIllustration;
 NotificationsIllustration.propTypes = {

package/lib/components/EmptyStates/assets/UnauthorizedIllustration.js

@@ -28,14 +28,15 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
     size = _ref.size,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var svgId = (0, _uuidv.default)();
-  return theme === 'dark' ? /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
     xmlns: "http://www.w3.org/2000/svg",
     xmlnsXlink: "http://www.w3.org/1999/xlink",
     width: 80,
     height: 80,
     viewBox: "0 0 80 80",
-    className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
-  }), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+    className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-unauthorized"), "".concat(blockClass, "__illustration--").concat(size)]),
+    role: "img"
+  }), theme === 'dark' ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__b_dark_".concat(svgId),
     x1: 17.33,
     y1: 40.68,
@@ -118,14 +119,7 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
   }), /*#__PURE__*/_react.default.createElement("path", {
     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",
     fill: "#6f6f6f"
-  })) : /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({}, rest, {
-    xmlns: "http://www.w3.org/2000/svg",
-    xmlnsXlink: "http://www.w3.org/1999/xlink",
-    width: 80,
-    height: 80,
-    viewBox: "0 0 80 80",
-    className: (0, _classnames.default)(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration--").concat(size)])
-  }), /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
+  })) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("defs", null, /*#__PURE__*/_react.default.createElement("linearGradient", {
     id: "prefix__b",
     x1: 27.98,
     y1: 73.72,
@@ -306,7 +300,7 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
   }), /*#__PURE__*/_react.default.createElement("path", {
     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",
     fill: "url(#prefix__h_".concat(svgId, ")")
-  }));
+  })));
 };
 exports.UnauthorizedIllustration = UnauthorizedIllustration;
 UnauthorizedIllustration.propTypes = {

package/lib/components/ExportModal/ExportModal.js

@@ -18,7 +18,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _devtools = require("../../global/js/utils/devtools");
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 var _settings = require("../../settings");
-var _excluded = ["body", "className", "error", "errorMessage", "filename", "hidePasswordLabel", "inputLabel", "inputType", "invalidInputText", "loading", "loadingMessage", "onClose", "onRequestSubmit", "open", "preformattedExtensions", "preformattedExtensionsLabel", "primaryButtonText", "secondaryButtonText", "showPasswordLabel", "successMessage", "successful", "title", "validExtensions"]; //
+var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
+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"]; //
 // Copyright IBM Corp. 2020, 2021
 //
 // 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) {
     onClose = _ref.onClose,
     onRequestSubmit = _ref.onRequestSubmit,
     open = _ref.open,
+    portalTargetIn = _ref.portalTarget,
     _ref$preformattedExte = _ref.preformattedExtensions,
     preformattedExtensions = _ref$preformattedExte === void 0 ? defaults.preformattedExtensions : _ref$preformattedExte,
     preformattedExtensionsLabel = _ref.preformattedExtensionsLabel,
@@ -81,6 +83,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     extension = _useState6[0],
     setExtension = _useState6[1];
+  var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
   (0, _react.useEffect)(function () {
     var _preformattedExtensio;
     setName(filename);
@@ -125,7 +128,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     invalidText: invalidInputText,
     onBlur: onBlurHandler
   }, 'data-modal-primary-focus', true);
-  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
+  return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className),
     "aria-label": title,
     size: "sm",
@@ -185,7 +188,7 @@ var ExportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     kind: "primary",
     onClick: onSubmitHandler,
     disabled: primaryButtonDisabled
-  }, primaryButtonText)));
+  }, primaryButtonText))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -248,6 +251,10 @@ ExportModal.propTypes = {
    * Specify whether the Modal is currently open
    */
   open: _propTypes.default.bool,
+  /**
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   */
+  portalTarget: _propTypes.default.node,
   /**
    * Array of extensions to display as radio buttons
    */

package/lib/components/ImportModal/ImportModal.js

@@ -19,9 +19,10 @@ var _react2 = require("@carbon/react");
 var _classnames = _interopRequireDefault(require("classnames"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _devtools = require("../../global/js/utils/devtools");
+var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 var _settings = require("../../settings");
-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"]; //
+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"]; //
 // Copyright IBM Corp. 2021, 2021
 //
 // 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) {
     onClose = _ref.onClose,
     onRequestSubmit = _ref.onRequestSubmit,
     open = _ref.open,
+    portalTargetIn = _ref.portalTarget,
     primaryButtonText = _ref.primaryButtonText,
     secondaryButtonText = _ref.secondaryButtonText,
     title = _ref.title,
@@ -77,6 +79,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     importUrl = _useState4[0],
     setImportUrl = _useState4[1];
+  var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
   var isInvalidFileType = function isInvalidFileType(file) {
     var acceptSet = new Set(accept);
     var name = file.name;
@@ -201,7 +204,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var importButtonDisabled = !importUrl || hasFiles;
   var fileStatusString = "".concat(numberOfValidFiles, " / ").concat(numberOfFiles, " ").concat(fileUploadLabel);
   var blockClass = "".concat(_settings.pkg.prefix, "--import-modal");
-  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, _objectSpread({
+  return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, _objectSpread({
     open: open,
     ref: ref
   }, (0, _devtools.getDevtoolsProps)(componentName)), {
@@ -278,7 +281,7 @@ var ImportModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     kind: "primary",
     onClick: onSubmitHandler,
     disabled: primaryButtonDisabled
-  }, primaryButtonText)));
+  }, primaryButtonText))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -381,6 +384,10 @@ ImportModal.propTypes = {
    * Specify whether the Modal is currently open
    */
   open: _propTypes.default.bool.isRequired,
+  /**
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   */
+  portalTarget: _propTypes.default.node,
   /**
    * Specify the text for the primary button
    */

package/lib/components/RemoveModal/RemoveModal.js

@@ -18,7 +18,8 @@ var _devtools = require("../../global/js/utils/devtools");
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 var _settings = require("../../settings");
 var _hooks = require("../../global/js/hooks");
-var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"]; //
+var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
+var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"]; //
 // Copyright IBM Corp. 2020, 2021
 //
 // 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) {
     onClose = _ref.onClose,
     onRequestSubmit = _ref.onRequestSubmit,
     open = _ref.open,
+    portalTargetIn = _ref.portalTarget,
     preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
     primaryButtonDisabled = _ref.primaryButtonDisabled,
     primaryButtonText = _ref.primaryButtonText,
@@ -62,6 +64,7 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     userInput = _useState2[0],
     setUserInput = _useState2[1];
   var idRef = (0, _react.useRef)((0, _uuidv.default)());
+  var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
   var onChangeHandler = function onChangeHandler(e) {
     setUserInput(e.target.value);
   };
@@ -85,7 +88,7 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       setUserInput('');
     }
   }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
-  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
+  return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
     className: (0, _classnames.default)(blockClass, className),
     size: "sm",
     "aria-label": title
@@ -119,7 +122,7 @@ var RemoveModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     kind: "danger",
     onClick: onRequestSubmit,
     disabled: primaryButtonStatus
-  }, primaryButtonText)));
+  }, primaryButtonText))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -166,6 +169,10 @@ RemoveModal.propTypes = {
    * Specify whether the Modal is currently open
    */
   open: _propTypes.default.bool.isRequired,
+  /**
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   */
+  portalTarget: _propTypes.default.node,
   /**
    * Prevent closing on click outside of modal
    */

package/lib/components/TagSet/TagSet.js

@@ -11,7 +11,6 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _TagSetOverflow = require("./TagSetOverflow");
@@ -40,13 +39,12 @@ var allTagsModalSearchThreshold = 10;
 // Default values for props
 var defaults = {
   align: 'start',
-  // allTagsModalTarget: document.body,
   overflowAlign: 'bottom'
 };
 var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var _ref$align = _ref.align,
     align = _ref$align === void 0 ? defaults.align : _ref$align,
-    allTagsModalTargetIn = _ref.allTagsModalTarget,
+    allTagsModalTarget = _ref.allTagsModalTarget,
     className = _ref.className,
     maxVisible = _ref.maxVisible,
     multiline = _ref.multiline,
@@ -84,22 +82,9 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     sizingTags = _useState10[0],
     setSizingTags = _useState10[1];
   var overflowTag = (0, _react.useRef)(null);
-  var _useState11 = (0, _react.useState)(null),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    allTagsModalTarget = _useState12[0],
-    setAllTagsModalTarget = _useState12[1];
   var handleShowAllClick = function handleShowAllClick() {
     setShowAllModalOpen(true);
   };
-  (0, _react.useEffect)(function () {
-    if (allTagsModalTargetIn) {
-      setAllTagsModalTarget(allTagsModalTargetIn);
-    } else {
-      if (_settings.pkg.isFeatureEnabled('default-portal-target-body')) {
-        setAllTagsModalTarget(document.body);
-      }
-    }
-  }, [allTagsModalTargetIn]);
   (0, _react.useEffect)(function () {
     var newSizingTags = [];
     // create sizing tags
@@ -219,16 +204,15 @@ var TagSet = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   }, hiddenSizingTags), /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
     ref: displayedArea
-  }, displayedTags)), (allTagsModalTarget ? _reactDom.createPortal : function (children) {
-    return children;
-  })( /*#__PURE__*/_react.default.createElement(_TagSetModal.TagSetModal, {
+  }, displayedTags)), /*#__PURE__*/_react.default.createElement(_TagSetModal.TagSetModal, {
     allTags: tags,
     open: showAllModalOpen,
     title: allTagsModalTitle,
     onClose: handleModalClose,
     searchLabel: allTagsModalSearchLabel,
-    searchPlaceholder: allTagsModalSearchPlaceholderText
-  }), allTagsModalTarget));
+    searchPlaceholder: allTagsModalSearchPlaceholderText,
+    portalTarget: allTagsModalTarget
+  }));
 });
 
 // Return a placeholder if not released and not enabled by feature flag

package/lib/components/TagSet/TagSetModal.js

@@ -16,7 +16,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _react2 = require("@carbon/react");
 var _settings = require("../../settings");
 var _propsHelper = require("../../global/js/utils/props-helper");
-var _excluded = ["allTags", "className", "title", "onClose", "open", "searchLabel", "searchPlaceholder"],
+var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
+var _excluded = ["allTags", "className", "title", "onClose", "open", "portalTarget", "searchLabel", "searchPlaceholder"],
   _excluded2 = ["label"]; //
 // Copyright IBM Corp. 2021, 2020
 //
@@ -41,6 +42,7 @@ var TagSetModal = function TagSetModal(_ref) {
     title = _ref.title,
     onClose = _ref.onClose,
     open = _ref.open,
+    portalTargetIn = _ref.portalTarget,
     _ref$searchLabel = _ref.searchLabel,
     searchLabel = _ref$searchLabel === void 0 ? defaults.searchLabel : _ref$searchLabel,
     searchPlaceholder = _ref.searchPlaceholder,
@@ -53,6 +55,7 @@ var TagSetModal = function TagSetModal(_ref) {
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     search = _useState4[0],
     setSearch = _useState4[1];
+  var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
   (0, _react.useEffect)(function () {
     var newFilteredModalTags = [];
     if (open) {
@@ -75,7 +78,7 @@ var TagSetModal = function TagSetModal(_ref) {
   var handleSearch = function handleSearch(ev) {
     setSearch(ev.target.value || '');
   };
-  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
+  return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
     containerClassName: "".concat(blockClass, "__container"),
     className: (0, _classnames.default)(className, "".concat(blockClass)),
     size: "sm",
@@ -104,7 +107,7 @@ var TagSetModal = function TagSetModal(_ref) {
     }), label);
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__fade")
-  }));
+  })));
 };
 exports.TagSetModal = TagSetModal;
 TagSetModal.propTypes = {
@@ -114,6 +117,7 @@ TagSetModal.propTypes = {
   className: _propTypes.default.string,
   onClose: _propTypes.default.func,
   open: _propTypes.default.bool,
+  portalTarget: _propTypes.default.node,
   searchLabel: _propTypes.default.string,
   searchPlaceholder: _propTypes.default.string,
   title: _propTypes.default.string

package/lib/components/Tearsheet/TearsheetShell.js

@@ -11,15 +11,16 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactDom = require("react-dom");
 var _useResizeObserver2 = require("../../global/js/hooks/useResizeObserver");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _settings = require("../../settings");
 var _pconsole = _interopRequireDefault(require("../../global/js/utils/pconsole"));
+var _getNodeTextContent = require("../../global/js/utils/getNodeTextContent");
 var _react2 = require("@carbon/react");
 var _ActionSet = require("../ActionSet");
 var _Wrap = require("../../global/js/utils/Wrap");
+var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
 var _excluded = ["actions", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "selectorPrimaryFocus", "size", "portalTarget", "title", "verticalPosition"];
 /**
  * Copyright IBM Corp. 2020, 2023
@@ -94,20 +95,7 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var carbonPrefix = (0, _react2.usePrefix)();
   var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
-  // node the modal tearsheet is hosted in
-  var _useState = (0, _react.useState)(null),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    portalTarget = _useState2[0],
-    setPortalTarget = _useState2[1];
-  (0, _react.useEffect)(function () {
-    if (portalTargetIn) {
-      setPortalTarget(portalTargetIn);
-    } else {
-      if (_settings.pkg.isFeatureEnabled('default-portal-target-body')) {
-        setPortalTarget(document.body);
-      }
-    }
-  }, [portalTargetIn]);
+  var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
   var localRef = (0, _react.useRef)();
   var resizer = (0, _react.useRef)(null);
   var modalRef = ref || localRef;
@@ -116,14 +104,14 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
   var wide = size === 'wide';
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    depth = _useState2[0],
+    setDepth = _useState2[1];
   var _useState3 = (0, _react.useState)(0),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    depth = _useState4[0],
-    setDepth = _useState4[1];
-  var _useState5 = (0, _react.useState)(0),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    position = _useState6[0],
-    setPosition = _useState6[1];
+    position = _useState4[0],
+    setPosition = _useState4[1];
 
   // Keep a record of the previous value of depth.
   var prevDepth = (0, _react.useRef)();
@@ -208,10 +196,8 @@ var TearsheetShell = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref)
 
     // Include an ActionSet if and only if one or more actions is given.
     var includeActions = actions && (actions === null || actions === void 0 ? void 0 : actions.length) > 0;
-    return (portalTarget ? _reactDom.createPortal : function (children) {
-      return children;
-    })( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
-      "aria-label": title,
+    return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
+      "aria-label": (0, _getNodeTextContent.getNodeTextContent)(title),
       className: (0, _classnames.default)(bc, className, (_cx = {}, (0, _defineProperty2.default)(_cx, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
       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)
     })))), /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer
-    })), portalTarget);
+    })));
   } else {
     _pconsole.default.warn('Tearsheet not rendered: maximum stacking depth exceeded.');
     return null;

package/lib/global/decorators/sidePanelDecorator.js

@@ -7,6 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.sidePanelDecorator = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@carbon/react");
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 var sidePanelDecorator = function sidePanelDecorator(renderHeader, prefix) {
   return function (Story) {
     return /*#__PURE__*/_react.default.createElement("div", {

package/lib/global/js/hooks/usePortalTarget.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePortalTarget = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _settings = require("../../../settings");
+var _reactDom = require("react-dom");
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+var usePortalTarget = function usePortalTarget(portalTargetIn) {
+  var _useState = (0, _react.useState)(null),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    portalTarget = _useState2[0],
+    setPortalTarget = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (portalTargetIn) {
+      setPortalTarget(portalTargetIn);
+    } else {
+      if (_settings.pkg.isFeatureEnabled('default-portal-target-body')) {
+        setPortalTarget(document.body);
+      }
+    }
+  }, [portalTargetIn]);
+  var renderPortalUse = (0, _react.useCallback)(function (children) {
+    return portalTarget ? /*#__PURE__*/(0, _reactDom.createPortal)(children, portalTarget) : children;
+  }, [portalTarget]);
+  return renderPortalUse;
+};
+exports.usePortalTarget = usePortalTarget;

package/lib/global/js/hooks/useWindowScroll.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useNearestScroll = useNearestScroll;
+exports.useScroll = useScroll;
 exports.useWindowScroll = useWindowScroll;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("react");
@@ -83,4 +84,9 @@ function useNearestScroll(ref, effect, deps) {
     scrollableTarget = window;
   }
   return useTargetScroll(scrollableTarget, effect, deps, throttle);
+}
+function useScroll(ref, effect, deps) {
+  var _ref$current;
+  var throttle = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
+  return useTargetScroll((_ref$current = ref === null || ref === void 0 ? void 0 : ref.current) !== null && _ref$current !== void 0 ? _ref$current : null, effect, deps, throttle);
 }

package/lib/global/js/package-settings.js

@@ -79,7 +79,6 @@ var defaults = {
 
   // feature level flags
   feature: {
-    'a-new-feature': false,
     'default-portal-target-body': true,
     'Datagrid.useInfiniteScroll': false,
     'Datagrid.useInlineEdit': false,

package/lib/global/js/utils/getNodeTextContent.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getNodeTextContent = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+/**
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Returns a compiled string of all the text content of a React node and any of its child nodes.
+ * This is meant to be used in a limited fashion to convert a "styled" sentence into a single string:
+ *   e.g. <p>Title <b>Page</b>.</p> --> "Title Page."
+ * This will likely not work for arrays of nodes due to the lack of word spacing:
+ *   e.g. <ul>
+ *          <li>Item 1</li>
+ *          <li>Item 2</li>
+ *          <li>Item 3</li>
+ *        </ul>
+ *        --> "Item 1Item 2Item 3"
+ * @param {Node} node A React node
+ * @returns {string}
+ */
+var getNodeTextContent = function getNodeTextContent(node) {
+  if (node == null) {
+    return '';
+  }
+  switch ((0, _typeof2.default)(node)) {
+    case 'string':
+    case 'number':
+      return node.toString();
+    case 'object':
+      {
+        if (node instanceof Array) {
+          return node.map(getNodeTextContent).join('');
+        }
+        if ('props' in node) {
+          return getNodeTextContent(node.props.children);
+        }
+
+        // Ignore any other JavaScript 'object' types.
+        return '';
+      }
+    default:
+      // Ignore all other JavaScript types.
+      return '';
+  }
+};
+exports.getNodeTextContent = getNodeTextContent;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.10.2",
+  "version": "2.11.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -23,7 +23,8 @@
     "css",
     "es",
     "lib",
-    "scss"
+    "scss",
+    "flags.js"
   ],
   "keywords": [
     "carbon",
@@ -56,6 +57,9 @@
   "devDependencies": {
     "@babel/cli": "^7.22.10",
     "@babel/core": "^7.22.10",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
     "babel-preset-ibm-cloud-cognitive": "^0.14.39",
     "chalk": "^4.1.2",
     "change-case": "^4.1.2",
@@ -92,5 +96,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "4bad2f42da78adaf3eddc9d68db068b0d2d71834"
+  "gitHead": "512f13bb07b7b8c7bdbd1ea97d2bc1e86de3fabf"
 }

package/scss/components/ActionSet/_action-set.scss

@@ -107,7 +107,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   .#{$action-set-block-class}__action-button:not(
     .#{$action-set-block-class}__action-button--ghost
   ) {
-  max-width: rem(232px);
+  /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
+  max-width: to-rem(232px);
   flex: 0 1 25%;
 }