@carbon/ibm-products 2.10.2 → 2.11.1

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/Tearsheet.js

@@ -176,9 +176,9 @@ Tearsheet.propTypes = _objectSpread({
    */
   open: PropTypes.bool,
   /**
-   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
-  portalTarget: PropTypes.node,
+  portalTarget: PropTypes.instanceOf(Element),
   /**
    * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
    */

package/es/components/Tearsheet/TearsheetNarrow.js

@@ -142,9 +142,9 @@ TearsheetNarrow.propTypes = _objectSpread({
    */
   open: PropTypes.bool,
   /**
-   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
-  portalTarget: PropTypes.node,
+  portalTarget: PropTypes.instanceOf(Element),
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

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;
@@ -397,9 +383,9 @@ TearsheetShell.propTypes = _objectSpread({
    */
   open: PropTypes.bool,
   /**
-   * The DOM node the tearsheet should be rendered within. Defaults to document.body.
+   * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
    */
-  portalTarget: PropTypes.node,
+  portalTarget: PropTypes.instanceOf(Element),
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */

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/useRetrieveFormTitles.js

@@ -0,0 +1,20 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import { useEffect } from 'react';
+export var useRetrieveFormTitles = function useRetrieveFormTitles(_ref) {
+  var formContext = _ref.formContext,
+    formNumber = _ref.formNumber,
+    title = _ref.title;
+  useEffect(function () {
+    if (formContext) {
+      formContext.setFormTitles(function (prev) {
+        var prevTitle = prev[formNumber];
+        if (prevTitle !== title) {
+          var clone = _toConsumableArray(prev);
+          clone[formNumber] = title;
+          return clone;
+        }
+        return prev;
+      });
+    }
+  }, [title, formContext, formNumber]);
+};

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

@@ -74,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

package/lib/components/ButtonSetWithOverflow/ButtonSetWithOverflow.js

@@ -17,8 +17,8 @@ var _useResizeObserver = require("../../global/js/hooks/useResizeObserver");
 var _react2 = require("@carbon/react");
 var _settings = require("../../settings");
 var _propsHelper = require("../../global/js/utils/props-helper");
-var _excluded = ["buttons"],
-  _excluded2 = ["label", "key", "kind"],
+var _excluded = ["isHidden", "buttons"],
+  _excluded2 = ["label", "key", "kind", "id"],
   _excluded3 = ["buttons"],
   _excluded4 = ["key", "kind"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -105,7 +105,9 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [buttons]);
   var AButtonSet = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
-    var buttons = _ref2.buttons,
+    var _ref2$isHidden = _ref2.isHidden,
+      isHidden = _ref2$isHidden === void 0 ? false : _ref2$isHidden,
+      buttons = _ref2.buttons,
       rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
     return /*#__PURE__*/_react.default.createElement(_react2.ButtonSet, (0, _extends2.default)({}, rest, {
       ref: ref
@@ -113,16 +115,25 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
       var label = _ref3.label,
         key = _ref3.key,
         kind = _ref3.kind,
+        id = _ref3.id,
         other = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
       var kindFix = kind === 'default' ? 'primary' : kind;
       return /*#__PURE__*/_react.default.createElement(_react2.Button, (0, _extends2.default)({}, other, {
         key: key && "button-set-".concat(key),
         size: buttonSize,
         type: "button",
-        kind: kindFix
+        kind: kindFix,
+        id: id ? isHidden ? "".concat(id, "--hidden") : id : null
       }), label);
     }));
   });
+  AButtonSet.propTypes = {
+    /**
+     *  isHidden - Used to conditionally change id if one is passed to the `AButtonSet` component
+     *  in order to avoid duplicate ids between the visible and hidden button set buttons
+     */
+    isHidden: _propTypes.default.bool
+  };
   var AButtonMenu = /*#__PURE__*/_react.default.forwardRef(function (_ref4, ref) {
     var buttons = _ref4.buttons,
       rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
@@ -153,7 +164,8 @@ var ButtonSetWithOverflow = function ButtonSetWithOverflow(_ref) {
     "aria-hidden": true,
     ref: sizingContainerRefSet,
     size: buttonSize,
-    buttons: buttons
+    buttons: buttons,
+    isHidden: true
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "".concat(blockClass, "__button-container ").concat(blockClass, "__button-container--hidden"),
     "aria-hidden": true

package/lib/components/CreateModal/CreateModal.js

@@ -13,7 +13,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _devtools = require("../../global/js/utils/devtools");
 var _settings = require("../../settings");
-var _excluded = ["className", "children", "onRequestClose", "onRequestSubmit", "open", "title", "subtitle", "description", "secondaryButtonText", "primaryButtonText", "disableSubmit", "selectorPrimaryFocus"];
+var _usePortalTarget = require("../../global/js/hooks/usePortalTarget");
+var _excluded = ["className", "children", "onRequestClose", "onRequestSubmit", "open", "title", "subtitle", "description", "secondaryButtonText", "portalTarget", "primaryButtonText", "disableSubmit", "selectorPrimaryFocus"];
 /**
  * Copyright IBM Corp. 2021, 2021
  *
@@ -52,11 +53,13 @@ var CreateModal = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
     subtitle = _ref2.subtitle,
     description = _ref2.description,
     secondaryButtonText = _ref2.secondaryButtonText,
+    portalTargetIn = _ref2.portalTarget,
     primaryButtonText = _ref2.primaryButtonText,
     disableSubmit = _ref2.disableSubmit,
     selectorPrimaryFocus = _ref2.selectorPrimaryFocus,
     rest = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  return /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
+  var renderPortalUse = (0, _usePortalTarget.usePortalTarget)(portalTargetIn);
+  return renderPortalUse( /*#__PURE__*/_react.default.createElement(_react2.ComposedModal, (0, _extends2.default)({}, rest, {
     selectorPrimaryFocus: selectorPrimaryFocus,
     className: (0, _classnames.default)(blockClass, className),
     open: open,
@@ -89,7 +92,7 @@ var CreateModal = /*#__PURE__*/_react.default.forwardRef(function (_ref2, ref) {
     kind: "primary",
     onClick: onRequestSubmit,
     disabled: disableSubmit
-  }, primaryButtonText)));
+  }, primaryButtonText))));
 });
 
 // Return a placeholder if not released and not enabled by feature flag
@@ -127,6 +130,10 @@ CreateModal.propTypes = {
    * Specifies whether the CreateModal 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,
   /**
    * Specifies the primary button's text in the modal.
    */