@carbon/ibm-products 2.10.2 → 2.11.1

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

@@ -182,9 +182,9 @@ Tearsheet.propTypes = _objectSpread({
    */
   open: _propTypes.default.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.default.node,
+  portalTarget: _propTypes.default.instanceOf(Element),
   /**
    * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
    */

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -148,9 +148,9 @@ TearsheetNarrow.propTypes = _objectSpread({
    */
   open: _propTypes.default.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.default.node,
+  portalTarget: _propTypes.default.instanceOf(Element),
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

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;
@@ -408,9 +394,9 @@ TearsheetShell.propTypes = _objectSpread({
    */
   open: _propTypes.default.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.default.node,
+  portalTarget: _propTypes.default.instanceOf(Element),
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRetrieveFormTitles = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = require("react");
+var useRetrieveFormTitles = function useRetrieveFormTitles(_ref) {
+  var formContext = _ref.formContext,
+    formNumber = _ref.formNumber,
+    title = _ref.title;
+  (0, _react.useEffect)(function () {
+    if (formContext) {
+      formContext.setFormTitles(function (prev) {
+        var prevTitle = prev[formNumber];
+        if (prevTitle !== title) {
+          var clone = (0, _toConsumableArray2.default)(prev);
+          clone[formNumber] = title;
+          return clone;
+        }
+        return prev;
+      });
+    }
+  }, [title, formContext, formNumber]);
+};
+exports.useRetrieveFormTitles = useRetrieveFormTitles;

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.1",
   "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",
@@ -76,6 +77,9 @@
   "dependencies": {
     "@babel/runtime": "^7.22.10",
     "@carbon/telemetry": "^0.1.0",
+    "@dnd-kit/core": "^6.0.8",
+    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/utilities": "^3.2.1",
     "framer-motion": "^6.5.1 < 7",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
@@ -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": "7764b5a83d2878931c637c3a76e04c857f0aeb19"
 }

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%;
 }
 

package/scss/components/Datagrid/_datagrid.scss

@@ -31,6 +31,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
 .#{$block-class}__datagridWrap {
   display: block;
   width: 100%;
+
   :global(.#{c4p-settings.$carbon-prefix}--checkbox) {
     display: none;
   }
@@ -70,3 +71,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--datagrid;
     }
   }
 }
+
+// firefox fix for issue mentioned in 3442
+.#{$block-class}
+  .#{c4p-settings.$carbon-prefix}--menu-button__trigger:not(
+    .#{c4p-settings.$carbon-prefix}--btn--ghost
+  ) {
+  min-width: auto;
+}

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -6,6 +6,7 @@
 //
 
 @use '@carbon/styles/scss/theme' as *;
+@use '@carbon/layout/scss/convert' as *;
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/react/scss/components/button/tokens' as *;
 @use '../../../global/styles/project-settings' as c4p-settings;
@@ -92,10 +93,10 @@
       &.#{c4p-settings.$carbon-prefix}--data-table--sm,
       &.#{c4p-settings.$carbon-prefix}--data-table--md {
         .#{$block-class}__cell {
-          /* stylelint-disable-next-line carbon/layout-token-use */
-          padding-top: rem(7px);
-          /* stylelint-disable-next-line carbon/layout-token-use */
-          padding-bottom: rem(6px);
+          /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+          padding-top: to-rem(7px);
+          /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+          padding-bottom: to-rem(6px);
         }
       }
 
@@ -123,8 +124,8 @@
       }
 
       .#{c4p-settings.$carbon-prefix}--table-column-checkbox {
-        /* stylelint-disable-next-line carbon/layout-token-use */
-        padding-top: rem(13px);
+        /* stylelint-disable-next-line -- to-rem carbon replacement for rem */
+        padding-top: to-rem(13px);
       }
     }