@carbon/ibm-products 2.10.1 → 2.11.0

package/es/components/ExportModal/ExportModal.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 _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"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 //
@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import uuidv4 from '../../global/js/utils/uuidv4';
 import { pkg } from '../../settings';
+import { usePortalTarget } from '../../global/js/hooks/usePortalTarget';
 var componentName = 'ExportModal';
 
 // Default values for props
@@ -48,6 +49,7 @@ export var ExportModal = /*#__PURE__*/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,
@@ -73,6 +75,7 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     extension = _useState6[0],
     setExtension = _useState6[1];
+  var renderPortalUse = usePortalTarget(portalTargetIn);
   useEffect(function () {
     var _preformattedExtensio;
     setName(filename);
@@ -117,7 +120,7 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     invalidText: invalidInputText,
     onBlur: onBlurHandler
   }, 'data-modal-primary-focus', true);
-  return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
+  return renderPortalUse( /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
     className: cx(blockClass, className),
     "aria-label": title,
     size: "sm",
@@ -177,7 +180,7 @@ export var ExportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     kind: "primary",
     onClick: onSubmitHandler,
     disabled: primaryButtonDisabled
-  }, primaryButtonText)));
+  }, primaryButtonText))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -239,6 +242,10 @@ ExportModal.propTypes = {
    * Specify whether the Modal is currently open
    */
   open: PropTypes.bool,
+  /**
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   */
+  portalTarget: PropTypes.node,
   /**
    * Array of extensions to display as radio buttons
    */

package/es/components/ImportModal/ImportModal.js

@@ -4,7 +4,7 @@ import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 import _regeneratorRuntime from "@babel/runtime/regenerator";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -21,6 +21,7 @@ import { ComposedModal, ModalHeader, ModalFooter, ModalBody, FileUploaderDropCon
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { getDevtoolsProps } from '../../global/js/utils/devtools';
+import { usePortalTarget } from '../../global/js/hooks/usePortalTarget';
 import uuidv4 from '../../global/js/utils/uuidv4';
 import { pkg } from '../../settings';
 var componentName = 'ImportModal';
@@ -56,6 +57,7 @@ export var ImportModal = /*#__PURE__*/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,
@@ -69,6 +71,7 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     importUrl = _useState4[0],
     setImportUrl = _useState4[1];
+  var renderPortalUse = usePortalTarget(portalTargetIn);
   var isInvalidFileType = function isInvalidFileType(file) {
     var acceptSet = new Set(accept);
     var name = file.name;
@@ -193,7 +196,7 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var importButtonDisabled = !importUrl || hasFiles;
   var fileStatusString = "".concat(numberOfValidFiles, " / ").concat(numberOfFiles, " ").concat(fileUploadLabel);
   var blockClass = "".concat(pkg.prefix, "--import-modal");
-  return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, _objectSpread({
+  return renderPortalUse( /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, _objectSpread({
     open: open,
     ref: ref
   }, getDevtoolsProps(componentName)), {
@@ -270,7 +273,7 @@ export var ImportModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     kind: "primary",
     onClick: onSubmitHandler,
     disabled: primaryButtonDisabled
-  }, primaryButtonText)));
+  }, primaryButtonText))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -372,6 +375,10 @@ ImportModal.propTypes = {
    * Specify whether the Modal is currently open
    */
   open: PropTypes.bool.isRequired,
+  /**
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   */
+  portalTarget: PropTypes.node,
   /**
    * Specify the text for the primary button
    */

package/es/components/RemoveModal/RemoveModal.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
+var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 //
@@ -20,6 +20,7 @@ import { getDevtoolsProps } from '../../global/js/utils/devtools';
 import uuidv4 from '../../global/js/utils/uuidv4';
 import { pkg } from '../../settings';
 import { usePreviousValue } from '../../global/js/hooks';
+import { usePortalTarget } from '../../global/js/hooks/usePortalTarget';
 var componentName = 'RemoveModal';
 
 /**
@@ -38,6 +39,7 @@ export var RemoveModal = /*#__PURE__*/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,
@@ -54,6 +56,7 @@ export var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     userInput = _useState2[0],
     setUserInput = _useState2[1];
   var idRef = useRef(uuidv4());
+  var renderPortalUse = usePortalTarget(portalTargetIn);
   var onChangeHandler = function onChangeHandler(e) {
     setUserInput(e.target.value);
   };
@@ -77,7 +80,7 @@ export var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
       setUserInput('');
     }
   }, [open, previousState === null || previousState === void 0 ? void 0 : previousState.open]);
-  return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
+  return renderPortalUse( /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
     className: cx(blockClass, className),
     size: "sm",
     "aria-label": title
@@ -111,7 +114,7 @@ export var RemoveModal = /*#__PURE__*/forwardRef(function (_ref, ref) {
     kind: "danger",
     onClick: onRequestSubmit,
     disabled: primaryButtonStatus
-  }, primaryButtonText)));
+  }, primaryButtonText))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -157,6 +160,10 @@ RemoveModal.propTypes = {
    * Specify whether the Modal is currently open
    */
   open: PropTypes.bool.isRequired,
+  /**
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   */
+  portalTarget: PropTypes.node,
   /**
    * Prevent closing on click outside of modal
    */

package/es/components/TagSet/TagSet.js

@@ -15,7 +15,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 //
 
 import React, { useState, useEffect, useRef, useCallback } from 'react';
-import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { TagSetOverflow } from './TagSetOverflow';
@@ -32,13 +31,12 @@ var allTagsModalSearchThreshold = 10;
 // Default values for props
 var defaults = {
   align: 'start',
-  // allTagsModalTarget: document.body,
   overflowAlign: 'bottom'
 };
 export var TagSet = /*#__PURE__*/React.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,
@@ -76,22 +74,9 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     sizingTags = _useState10[0],
     setSizingTags = _useState10[1];
   var overflowTag = useRef(null);
-  var _useState11 = useState(null),
-    _useState12 = _slicedToArray(_useState11, 2),
-    allTagsModalTarget = _useState12[0],
-    setAllTagsModalTarget = _useState12[1];
   var handleShowAllClick = function handleShowAllClick() {
     setShowAllModalOpen(true);
   };
-  useEffect(function () {
-    if (allTagsModalTargetIn) {
-      setAllTagsModalTarget(allTagsModalTargetIn);
-    } else {
-      if (pkg.isFeatureEnabled('default-portal-target-body')) {
-        setAllTagsModalTarget(document.body);
-      }
-    }
-  }, [allTagsModalTargetIn]);
   useEffect(function () {
     var newSizingTags = [];
     // create sizing tags
@@ -211,16 +196,15 @@ export var TagSet = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, hiddenSizingTags), /*#__PURE__*/React.createElement("div", {
     className: cx(["".concat(blockClass, "__tag-container"), multiline && "".concat(blockClass, "__tag-container--multiline")]),
     ref: displayedArea
-  }, displayedTags)), (allTagsModalTarget ? createPortal : function (children) {
-    return children;
-  })( /*#__PURE__*/React.createElement(TagSetModal, {
+  }, displayedTags)), /*#__PURE__*/React.createElement(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/es/components/TagSet/TagSetModal.js

@@ -2,7 +2,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["allTags", "className", "title", "onClose", "open", "searchLabel", "searchPlaceholder"],
+var _excluded = ["allTags", "className", "title", "onClose", "open", "portalTarget", "searchLabel", "searchPlaceholder"],
   _excluded2 = ["label"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -19,6 +19,7 @@ import cx from 'classnames';
 import { ComposedModal, ModalHeader, ModalBody, Search, Tag } from '@carbon/react';
 import { pkg } from '../../settings';
 import { prepareProps } from '../../global/js/utils/props-helper';
+import { usePortalTarget } from '../../global/js/hooks/usePortalTarget';
 var componentName = 'TagSetModal';
 var blockClass = "".concat(pkg.prefix, "--tag-set-modal");
 
@@ -33,6 +34,7 @@ export 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,
@@ -45,6 +47,7 @@ export var TagSetModal = function TagSetModal(_ref) {
     _useState4 = _slicedToArray(_useState3, 2),
     search = _useState4[0],
     setSearch = _useState4[1];
+  var renderPortalUse = usePortalTarget(portalTargetIn);
   useEffect(function () {
     var newFilteredModalTags = [];
     if (open) {
@@ -67,7 +70,7 @@ export var TagSetModal = function TagSetModal(_ref) {
   var handleSearch = function handleSearch(ev) {
     setSearch(ev.target.value || '');
   };
-  return /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
+  return renderPortalUse( /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
     containerClassName: "".concat(blockClass, "__container"),
     className: cx(className, "".concat(blockClass)),
     size: "sm",
@@ -96,7 +99,7 @@ export var TagSetModal = function TagSetModal(_ref) {
     }), label);
   })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__fade")
-  }));
+  })));
 };
 TagSetModal.propTypes = {
   allTags: PropTypes.arrayOf(PropTypes.shape(_objectSpread(_objectSpread({}, prepareProps(Tag.propTypes, 'filter')), {}, {
@@ -105,6 +108,7 @@ TagSetModal.propTypes = {
   className: PropTypes.string,
   onClose: PropTypes.func,
   open: PropTypes.bool,
+  portalTarget: PropTypes.node,
   searchLabel: PropTypes.string,
   searchPlaceholder: PropTypes.string,
   title: PropTypes.string

package/es/components/Tearsheet/TearsheetShell.js

@@ -14,7 +14,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 // Import portions of React that are needed.
 import React, { useEffect, useState, useRef } from 'react';
-import { createPortal } from 'react-dom';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver';
 
 // Other standard imports.
@@ -22,11 +21,13 @@ import PropTypes from 'prop-types';
 import cx from 'classnames';
 import { pkg } from '../../settings';
 import pconsole from '../../global/js/utils/pconsole';
+import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent';
 
 // Carbon and package components we use.
 import { Button, ComposedModal, Layer, ModalHeader, ModalBody, usePrefix } from '@carbon/react';
 import { ActionSet } from '../ActionSet';
 import { Wrap } from '../../global/js/utils/Wrap';
+import { usePortalTarget } from '../../global/js/hooks/usePortalTarget';
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(pkg.prefix, "--tearsheet");
@@ -85,20 +86,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var carbonPrefix = usePrefix();
   var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
-  // node the modal tearsheet is hosted in
-  var _useState = useState(null),
-    _useState2 = _slicedToArray(_useState, 2),
-    portalTarget = _useState2[0],
-    setPortalTarget = _useState2[1];
-  useEffect(function () {
-    if (portalTargetIn) {
-      setPortalTarget(portalTargetIn);
-    } else {
-      if (pkg.isFeatureEnabled('default-portal-target-body')) {
-        setPortalTarget(document.body);
-      }
-    }
-  }, [portalTargetIn]);
+  var renderPortalUse = usePortalTarget(portalTargetIn);
   var localRef = useRef();
   var resizer = useRef(null);
   var modalRef = ref || localRef;
@@ -107,14 +95,14 @@ export var TearsheetShell = /*#__PURE__*/React.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 = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    depth = _useState2[0],
+    setDepth = _useState2[1];
   var _useState3 = useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
-    depth = _useState4[0],
-    setDepth = _useState4[1];
-  var _useState5 = useState(0),
-    _useState6 = _slicedToArray(_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 = useRef();
@@ -199,10 +187,8 @@ export var TearsheetShell = /*#__PURE__*/React.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 ? createPortal : function (children) {
-      return children;
-    })( /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
-      "aria-label": title,
+    return renderPortalUse( /*#__PURE__*/React.createElement(ComposedModal, _extends({}, rest, {
+      "aria-label": getNodeTextContent(title),
       className: cx(bc, className, (_cx = {}, _defineProperty(_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), _defineProperty(_cx, "".concat(bc, "--wide"), wide), _defineProperty(_cx, "".concat(bc, "--narrow"), !wide), _cx)),
@@ -266,7 +252,7 @@ export var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     })))), /*#__PURE__*/React.createElement("div", {
       className: "".concat(bc, "__resize-detector"),
       ref: resizer
-    })), portalTarget);
+    })));
   } else {
     pconsole.warn('Tearsheet not rendered: maximum stacking depth exceeded.');
     return null;

package/es/components/index.js

@@ -38,7 +38,7 @@ export { OptionsTile } from './OptionsTile';
 export { EditInPlace } from './EditInPlace';
 export { DataSpreadsheet } from './DataSpreadsheet';
 export { Datagrid, useDatagrid, useInfiniteScroll, useNestedRows, useSelectRows, useExpandedRow, useOnRowClick, useSortableColumns, useRowIsMouseOver, useColumnCenterAlign, useColumnRightAlign, useDisableSelectRows, useStickyColumn, useActionsColumn, useCustomizeColumns, useSelectAllWithToggle, useColumnOrder, useInlineEdit, useFiltering, getAutoSizedColumnWidth, useFilterContext } from './Datagrid';
-export { EditTearsheet } from './EditTearsheet';
+export { EditTearsheet, EditTearsheetForm } from './EditTearsheet';
 export { EditTearsheetNarrow } from './EditTearsheetNarrow';
 export { EditFullPage } from './EditFullPage';
 export { EditUpdateCards } from './EditUpdateCards';

package/es/global/decorators/sidePanelDecorator.js

@@ -1,3 +1,10 @@
+/**
+ * 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.
+ */
+
 import React from 'react';
 import { Content } from '@carbon/react';
 export var sidePanelDecorator = function sidePanelDecorator(renderHeader, prefix) {

package/es/global/js/hooks/usePortalTarget.js

@@ -0,0 +1,30 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/**
+ * 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.
+ */
+import { useState, useEffect, useCallback } from 'react';
+import { pkg } from '../../../settings';
+import { createPortal } from 'react-dom';
+var usePortalTarget = function usePortalTarget(portalTargetIn) {
+  var _useState = useState(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    portalTarget = _useState2[0],
+    setPortalTarget = _useState2[1];
+  useEffect(function () {
+    if (portalTargetIn) {
+      setPortalTarget(portalTargetIn);
+    } else {
+      if (pkg.isFeatureEnabled('default-portal-target-body')) {
+        setPortalTarget(document.body);
+      }
+    }
+  }, [portalTargetIn]);
+  var renderPortalUse = useCallback(function (children) {
+    return portalTarget ? /*#__PURE__*/createPortal(children, portalTarget) : children;
+  }, [portalTarget]);
+  return renderPortalUse;
+};
+export { usePortalTarget };

package/es/global/js/hooks/useWindowScroll.js

@@ -74,4 +74,9 @@ export function useNearestScroll(ref, effect, deps) {
     scrollableTarget = window;
   }
   return useTargetScroll(scrollableTarget, effect, deps, throttle);
+}
+export 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/es/global/js/package-settings.js

@@ -65,6 +65,7 @@ var defaults = {
     DataSpreadsheet: false,
     Datagrid: false,
     EditTearsheet: false,
+    EditTearsheetForm: false,
     EditTearsheetNarrow: false,
     EditFullPage: false,
     EditUpdateCards: false
@@ -73,7 +74,6 @@ var defaults = {
 
   // feature level flags
   feature: {
-    'a-new-feature': false,
     'default-portal-target-body': true,
     'Datagrid.useInfiniteScroll': false,
     'Datagrid.useInlineEdit': false,

package/es/global/js/utils/getNodeTextContent.js

@@ -0,0 +1,47 @@
+import _typeof from "@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}
+ */
+export var getNodeTextContent = function getNodeTextContent(node) {
+  if (node == null) {
+    return '';
+  }
+  switch (_typeof(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 '';
+  }
+};

package/flags.js

@@ -0,0 +1,6 @@
+const { pkg } = require('./lib/settings.js');
+const { component, feature } = pkg;
+
+console.log('Components enabled by default\n', { component });
+
+console.log('\n\nDefault feature flag values\n', { feature });

package/lib/components/APIKeyModal/APIKeyModal.js

@@ -19,10 +19,11 @@ var _react2 = require("@carbon/react");
 var _icons = require("@carbon/react/icons");
 var _APIKeyDownloader = require("./APIKeyDownloader");
 var _settings = require("../../settings");
+var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
 var _devtools = require("../../global/js/utils/devtools");
 var _propsHelper = require("../../global/js/utils/props-helper");
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
-var _excluded = ["apiKey", "apiKeyLabel", "apiKeyName", "body", "className", "closeButtonText", "copyButtonText", "copyErrorText", "copyIconDescription", "customSteps", "downloadBodyText", "downloadFileName", "downloadFileType", "downloadLinkText", "editButtonText", "editSuccess", "editSuccessTitle", "editing", "error", "errorText", "generateButtonText", "generateSuccessBody", "generateSuccessTitle", "generateTitle", "hasAPIKeyVisibilityToggle", "hasDownloadLink", "hideAPIKeyLabel", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "previousStepButtonText", "showAPIKeyLabel"]; //
+var _excluded = ["apiKey", "apiKeyLabel", "apiKeyName", "body", "className", "closeButtonText", "copyButtonText", "copyErrorText", "copyIconDescription", "customSteps", "downloadBodyText", "downloadFileName", "downloadFileType", "downloadLinkText", "editButtonText", "editSuccess", "editSuccessTitle", "editing", "error", "errorText", "generateButtonText", "generateSuccessBody", "generateSuccessTitle", "generateTitle", "hasAPIKeyVisibilityToggle", "hasDownloadLink", "hideAPIKeyLabel", "loading", "loadingText", "modalLabel", "nameHelperText", "nameLabel", "namePlaceholder", "nameRequired", "nextStepButtonText", "onClose", "onCopy", "onRequestEdit", "onRequestGenerate", "open", "portalTarget", "previousStepButtonText", "showAPIKeyLabel"]; //
 // Copyright IBM Corp. 2021, 2021
 //
 // This source code is licensed under the Apache-2.0 license found in the
@@ -83,6 +84,7 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     onRequestEdit = _ref.onRequestEdit,
     onRequestGenerate = _ref.onRequestGenerate,
     open = _ref.open,
+    portalTargetIn = _ref.portalTarget,
     previousStepButtonText = _ref.previousStepButtonText,
     showAPIKeyLabel = _ref.showAPIKeyLabel,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -105,6 +107,7 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var copyRef = (0, _react.useRef)();
   var apiKeyInputId = (0, _react.useRef)((0, _uuidv.default)());
   var nameInputId = (0, _react.useRef)((0, _uuidv.default)());
+  var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
   var hasSteps = Boolean(customSteps.length);
   var apiKeyLoaded = apiKey && !loading;
   var hasNextStep = hasSteps && currentStep < customSteps.length - 1;
@@ -233,7 +236,7 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       onCloseHandler();
     }
   };
-  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)), {
@@ -308,7 +311,7 @@ var APIKeyModal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     kind: "primary",
     onClick: submitHandler,
     disabled: isPrimaryButtonDisabled()
-  }), getPrimaryButtonText())));
+  }), getPrimaryButtonText()))));
 });
 exports.APIKeyModal = APIKeyModal;
 var customStepsRequiredProps = function customStepsRequiredProps(type) {
@@ -509,6 +512,10 @@ APIKeyModal.propTypes = {
    * designates if modal is open or closed
    */
   open: _propTypes.default.bool.isRequired,
+  /**
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   */
+  portalTarget: _propTypes.default.node,
   /**
    * text that displays in the secondary button when using custom steps to indicate to the user that there is a previous step
    */

package/lib/components/AboutModal/AboutModal.js

@@ -18,7 +18,8 @@ var _settings = require("../../settings");
 var _uuidv = _interopRequireDefault(require("../../global/js/utils/uuidv4"));
 var _devtools = require("../../global/js/utils/devtools");
 var _react2 = require("@carbon/react");
-var _excluded = ["additionalInfo", "className", "closeIconDescription", "copyrightText", "content", "links", "logo", "modalAriaLabel", "onClose", "open", "title", "version"];
+var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
+var _excluded = ["additionalInfo", "className", "closeIconDescription", "copyrightText", "content", "links", "logo", "modalAriaLabel", "onClose", "open", "portalTarget", "title", "version"];
 /**
  * Copyright IBM Corp. 2020, 2021
  *
@@ -56,6 +57,7 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     modalAriaLabel = _ref.modalAriaLabel,
     onClose = _ref.onClose,
     open = _ref.open,
+    portalTargetIn = _ref.portalTarget,
     title = _ref.title,
     version = _ref.version,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -66,6 +68,7 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
   var bodyRef = (0, _react.useRef)();
   var contentRef = (0, _react.useRef)();
   var contentId = (0, _uuidv.default)();
+  var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
   var handleResize = function handleResize() {
     setHasScrollingContent(
     // if our scroll height exceeds the client height enable scrolling
@@ -82,7 +85,7 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
 
   // Detect resize of the ModalBody to recalculate whether scrolling is enabled
   (0, _useResizeObserver.useResizeObserver)(bodyRef, handleResize);
-  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,
     // Apply the block class to the main HTML element
     className // Apply any supplied class names to the main HTML element.
@@ -126,7 +129,7 @@ var AboutModal = /*#__PURE__*/_react.default.forwardRef(function (_ref, ref) {
     theme: "g100"
   }, /*#__PURE__*/_react.default.createElement(_react2.ModalFooter, {
     className: "".concat(blockClass, "__footer")
-  }, additionalInfo)));
+  }, additionalInfo))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -185,6 +188,10 @@ AboutModal.propTypes = {
    * Specifies whether the AboutModal is open or not.
    */
   open: _propTypes.default.bool,
+  /**
+   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   */
+  portalTarget: _propTypes.default.node,
   /**
    * Header text that provides the product name. The IBM Services logo
    * consists of two discrete, but required, elements: the iconic