@carbon/ibm-products 2.43.2-canary.7 → 2.43.2-canary.70

package/lib/components/OptionsTile/OptionsTile.js

@@ -19,6 +19,7 @@ var settings = require('../../settings.js');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var carbonMotion = require('@carbon/motion');
+var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 var useControllableState = require('../../global/js/hooks/useControllableState.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -99,9 +100,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
   var isInvalid = invalid;
   var isWarn = !isInvalid && warn;
   var isLocked = !isInvalid && !isWarn && locked;
-  var reducedMotion = window && window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-    matches: true
-  };
+  var shouldReduceMotion = usePrefersReducedMotion["default"]();
   if (open !== prevIsOpen) {
     if (isOpen && !open) {
       collapse();
@@ -111,7 +110,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
     setPrevIsOpen(open);
   }
   function expand() {
-    if (detailsRef.current && contentRef.current && !reducedMotion.matches) {
+    if (detailsRef.current && contentRef.current && !shouldReduceMotion) {
       setIsOpen(true);
       detailsRef.current.open = true;
       var _getComputedStyle = getComputedStyle(contentRef.current),
@@ -140,7 +139,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
     }
   }
   function collapse() {
-    if (contentRef.current && !reducedMotion.matches) {
+    if (contentRef.current && !shouldReduceMotion) {
       setClosing(true);
       var _getComputedStyle2 = getComputedStyle(contentRef.current),
         paddingTop = _getComputedStyle2.paddingTop,
@@ -192,6 +191,12 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
     var Icon = null;
     var text = summary;
     var summaryClasses = ["".concat(blockClass, "__summary")];
+    if (closing) {
+      summaryClasses.push("".concat(blockClass, "__summary--closing"));
+    }
+    if (isOpen) {
+      summaryClasses.push("".concat(blockClass, "__summary--open"));
+    }
     if (invalid) {
       Icon = icons.WarningFilled;
       text = invalidText;
@@ -255,7 +260,7 @@ exports.OptionsTile = /*#__PURE__*/React__default["default"].forwardRef(function
     onClick: toggle
   }, /*#__PURE__*/React__default["default"].createElement(icons.ChevronDown, {
     size: 16,
-    className: "".concat(blockClass, "__chevron")
+    className: cx__default["default"]("".concat(blockClass, "__chevron"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__chevron--open"), isOpen), "".concat(blockClass, "__chevron--closing"), closing))
   }), renderTitle()), /*#__PURE__*/React__default["default"].createElement("div", {
     className: "".concat(blockClass, "__content"),
     ref: contentRef

package/lib/components/PageHeader/PageHeader.js

@@ -36,6 +36,7 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _excluded = ["actionBarItems", "actionBarMenuOptionsClass", "actionBarOverflowAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTitle", "hasBackgroundAlways", "breadcrumbOverflowAriaLabel", "breadcrumbs", "children", "className", "collapseHeader", "collapseHeaderIconDescription", "collapseTitle", "disableBreadcrumbScroll", "enableBreadcrumbScroll", "expandHeaderIconDescription", "fullWidthGrid", "hasCollapseHeaderToggle", "narrowGrid", "navigation", "pageActions", "pageActionsOverflowLabel", "pageActionsMenuOptionsClass", "showAllTagsLabel", "subtitle", "tags", "title", "withoutBackground", "breadcrumbOverflowTooltipAlign"];
 var componentName = 'PageHeader';
+settings.pkg._silenceWarnings(true);
 settings.pkg.component.ActionBar = true;
 
 // Default values for props

package/lib/components/RemoveModal/RemoveModal.d.ts

@@ -58,6 +58,10 @@ interface RemoveModalProps extends React.ComponentProps<typeof ComposedModal> {
      * Specify the text for the primary button
      */
     primaryButtonText?: string;
+    /**
+     * Specify the danger description on the primary button
+     */
+    primaryDangerDescription?: string;
     /**
      * The name of the resource being acted upon
      */

package/lib/components/RemoveModal/RemoveModal.js

@@ -25,7 +25,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
+var _excluded = ["body", "className", "iconDescription", "inputInvalidText", "inputLabelText", "inputPlaceholderText", "label", "onClose", "onRequestSubmit", "open", "portalTarget", "preventCloseOnClickOutside", "primaryButtonDisabled", "primaryButtonText", "primaryDangerDescription", "resourceName", "secondaryButtonText", "textConfirmation", "title"];
 var componentName = 'RemoveModal';
 
 /**
@@ -49,6 +49,7 @@ exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     preventCloseOnClickOutside = _ref.preventCloseOnClickOutside,
     primaryButtonDisabled = _ref.primaryButtonDisabled,
     primaryButtonText = _ref.primaryButtonText,
+    primaryDangerDescription = _ref.primaryDangerDescription,
     resourceName = _ref.resourceName,
     secondaryButtonText = _ref.secondaryButtonText,
     textConfirmation = _ref.textConfirmation,
@@ -118,6 +119,7 @@ exports.RemoveModal = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, secondaryButtonText), /*#__PURE__*/React__default["default"].createElement(react.Button, {
     type: "submit",
     kind: "danger",
+    dangerDescription: primaryDangerDescription,
     onClick: onRequestSubmit,
     disabled: primaryButtonStatus
   }, primaryButtonText))));
@@ -182,6 +184,10 @@ exports.RemoveModal.propTypes = {
    * Specify the text for the primary button
    */
   primaryButtonText: index["default"].string,
+  /**
+   * Specify the danger description on the primary button
+   */
+  primaryDangerDescription: index["default"].string,
   /**
    * The name of the resource being acted upon
    */

package/lib/components/SearchBar/SearchBar.d.ts

@@ -17,7 +17,7 @@ interface SearchBarProps extends PropsWithChildren {
      */
     hideScopesLabel?: boolean;
     /** @type {string} The label text for the search text input. */
-    labelText?: string;
+    labelText: string;
     /** @type {Function} Function handler for when the user changes their query search. */
     onChange?: (event: any) => void;
     /** @type {Function} Function handler for when the user submits a search. */

package/lib/components/SearchBar/SearchBar.js

@@ -144,7 +144,7 @@ exports.SearchBar = /*#__PURE__*/React__default["default"].forwardRef(function (
   })) : null, /*#__PURE__*/React__default["default"].createElement(react.Search, {
     className: "".concat(blockClass, "__input"),
     closeButtonLabelText: clearButtonLabelText,
-    labelText: labelText || '',
+    labelText: labelText,
     name: "search-input",
     onChange: handleInputChange,
     placeholder: placeholderText,
@@ -197,7 +197,7 @@ exports.SearchBar.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   hideScopesLabel: index["default"].bool,
   /** @type {string} The label text for the search text input. */
-  labelText: index["default"].string,
+  labelText: index["default"].string.isRequired,
   /** @type {Function} Function handler for when the user changes their query search. */
   onChange: index["default"].func,
   /** @type {Function} Function handler for when the user submits a search. */

package/lib/components/SidePanel/SidePanel.js

@@ -23,6 +23,7 @@ var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var variants = require('./motion/variants.js');
 var pconsole = require('../../global/js/utils/pconsole.js');
+var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMotion.js');
 var ActionSet = require('../ActionSet/ActionSet.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
@@ -53,7 +54,6 @@ var defaults = {
  * Side panels keep users in-context of a page while performing tasks like navigating, editing, viewing details, or configuring something new.
  */
 exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
-  var _window;
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
     _ref$animateTitle = _ref.animateTitle,
@@ -120,7 +120,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     keyDownListener = _useFocus.keyDownListener;
   var panelRefValue = sidePanelRef.current;
   var previousOpen = usePreviousValue.usePreviousValue(open);
-  var shouldReduceMotion = framerMotion.useReducedMotion();
+  var shouldReduceMotion = usePrefersReducedMotion["default"]();
 
   // Title animation on scroll related state
   var _useState7 = React.useState(0),
@@ -163,9 +163,6 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       titleItemsStyles(animationProgress);
     }
   }, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
-  var reducedMotion = typeof document !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
-    matches: true
-  };
 
   // scroll panel to top going between steps
   React.useEffect(function () {
@@ -202,7 +199,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   }, [launcherButtonRef, open, previousOpen]);
   var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
     var canDoAnimateTitle = false;
-    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !shouldReduceMotion) {
       var _labelTextRef$current3, _labelTextRef$current4, _subtitleRef$current$, _subtitleRef$current;
       var titleEl = titleRef.current;
       var labelHeight = (_labelTextRef$current3 = labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current4 = labelTextRef.current) === null || _labelTextRef$current4 === void 0 ? void 0 : _labelTextRef$current4.offsetHeight) !== null && _labelTextRef$current3 !== void 0 ? _labelTextRef$current3 : 0;
@@ -218,8 +215,8 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
       var scrollEl = innerContentRef.current;
       if (scrollEl) {
-        var _window2;
-        var innerComputed = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.getComputedStyle(innerContentRef.current);
+        var _window;
+        var innerComputed = (_window = window) === null || _window === void 0 ? void 0 : _window.getComputedStyle(innerContentRef.current);
         var innerPaddingHeight = innerComputed ? parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingTop) + parseFloat(innerComputed === null || innerComputed === void 0 ? void 0 : innerComputed.paddingBottom) : 0;
         canDoAnimateTitle = (!!labelText || !!actionToolbarButtons || !!subtitle) && scrollEl.scrollHeight - scrollEl.clientHeight >= _scrollAnimationDistance + innerPaddingHeight;
       }
@@ -237,12 +234,12 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
 
   // Calculate scroll distances
   React.useEffect(function () {
-    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
+    if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !shouldReduceMotion) {
       checkSetDoAnimateTitle();
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id]);
+  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, shouldReduceMotion, id]);
 
   // click outside functionality if `includeOverlay` prop is set
   React.useEffect(function () {
@@ -278,10 +275,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   // Set the internal state `animationComplete` to true if
   // prefers reduced motion is true
   React.useEffect(function () {
-    if (reducedMotion.matches) {
+    if (shouldReduceMotion) {
       setAnimationComplete(true);
     }
-  }, [reducedMotion.matches]);
+  }, [shouldReduceMotion]);
 
   // initializes the side panel to open
   var onAnimationStart = function onAnimationStart() {
@@ -300,10 +297,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }
   }, [open, placement, selectorPageContent, slideIn]);
   React.useEffect(function () {
-    if (!open && previousState && previousState['open'] && reducedMotion.matches) {
+    if (!open && previousState && previousState['open'] && shouldReduceMotion) {
       onUnmount === null || onUnmount === void 0 || onUnmount();
     }
-  }, [open, onUnmount, reducedMotion.matches, previousState]);
+  }, [open, onUnmount, shouldReduceMotion, previousState]);
 
   // used to set margins of content for slide in panel version
   React.useEffect(function () {
@@ -316,15 +313,15 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       }
       if (placement && placement === 'right' && pageContentElement) {
         pageContentElement.style.marginInlineEnd = '0';
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-end ".concat(carbonMotion.moderate02) : '';
+        pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-end ".concat(carbonMotion.moderate02) : '';
         pageContentElement.style.marginInlineEnd = constants.SIDE_PANEL_SIZES[size];
       } else if (pageContentElement) {
         pageContentElement.style.marginInlineStart = '0';
-        pageContentElement.style.transition = !reducedMotion.matches ? "margin-inline-start ".concat(carbonMotion.moderate02) : '';
+        pageContentElement.style.transition = !shouldReduceMotion ? "margin-inline-start ".concat(carbonMotion.moderate02) : '';
         pageContentElement.style.marginInlineStart = constants.SIDE_PANEL_SIZES[size];
       }
     }
-  }, [slideIn, selectorPageContent, placement, size, reducedMotion.matches, open]);
+  }, [slideIn, selectorPageContent, placement, size, shouldReduceMotion, open]);
   React.useEffect(function () {
     if (open) {
       setTimeout(function () {
@@ -350,7 +347,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       className: "".concat(blockClass, "__title-text"),
       title: title,
       "aria-hidden": false
-    }, title), doAnimateTitle && !reducedMotion.matches && /*#__PURE__*/React__default["default"].createElement("h2", {
+    }, title), doAnimateTitle && !shouldReduceMotion && /*#__PURE__*/React__default["default"].createElement("h2", {
       className: "".concat(blockClass, "__collapsed-title-text"),
       title: title,
       "aria-hidden": true
@@ -367,10 +364,9 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       });
     }
     return /*#__PURE__*/React__default["default"].createElement("div", {
-      className: cx__default["default"]("".concat(blockClass, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !animateTitle), "".concat(blockClass, "__header--reduced-motion"), reducedMotion.matches), "".concat(blockClass, "__header--has-title"), title)),
+      className: cx__default["default"]("".concat(blockClass, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__header--on-detail-step"), currentStep > 0), "".concat(blockClass, "__header--no-title-animation"), !animateTitle), "".concat(blockClass, "__header--reduced-motion"), shouldReduceMotion), "".concat(blockClass, "__header--has-title"), title)),
       ref: headerRef
     }, currentStep > 0 && /*#__PURE__*/React__default["default"].createElement(react.Button, {
-      "aria-label": navigationBackIconDescription,
       kind: "ghost",
       size: slugCloseSize,
       disabled: false,

package/lib/components/SidePanel/motion/variants.d.ts

@@ -16,15 +16,13 @@ export namespace overlayVariants {
     }
 }
 export namespace panelVariants {
-    export function visible_1({ shouldReduceMotion }: {
-        shouldReduceMotion: any;
-    }): {
+    export function visible_1(): {
         x: number;
         transition: {
             duration: number;
             ease: number[];
         };
-        opacity: any;
+        opacity: number;
     };
     export { visible_1 as visible };
     export function hidden_1({ placement, shouldReduceMotion }: {
@@ -32,7 +30,7 @@ export namespace panelVariants {
         shouldReduceMotion: any;
     }): {
         x: string | number;
-        opacity: any;
+        opacity: number;
     };
     export { hidden_1 as hidden };
     export function exit_1({ placement, shouldReduceMotion }: {
@@ -44,7 +42,7 @@ export namespace panelVariants {
             duration: number;
             ease: number[];
         };
-        opacity: any;
+        opacity: number;
     };
     export { exit_1 as exit };
 }

package/lib/components/SidePanel/motion/variants.js

@@ -27,35 +27,34 @@ var overlayVariants = {
   }
 };
 var panelVariants = {
-  visible: function visible(_ref) {
-    var shouldReduceMotion = _ref.shouldReduceMotion;
+  visible: function visible() {
     return {
       x: 0,
       transition: {
         duration: motionConstants.DURATIONS.moderate02,
         ease: motionConstants.EASINGS.productive.standard
       },
-      opacity: shouldReduceMotion && 1
+      opacity: 1
     };
   },
-  hidden: function hidden(_ref2) {
-    var placement = _ref2.placement,
-      shouldReduceMotion = _ref2.shouldReduceMotion;
+  hidden: function hidden(_ref) {
+    var placement = _ref.placement,
+      shouldReduceMotion = _ref.shouldReduceMotion;
     return {
       x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
-      opacity: shouldReduceMotion && 0
+      opacity: shouldReduceMotion ? 0 : 1
     };
   },
-  exit: function exit(_ref3) {
-    var placement = _ref3.placement,
-      shouldReduceMotion = _ref3.shouldReduceMotion;
+  exit: function exit(_ref2) {
+    var placement = _ref2.placement,
+      shouldReduceMotion = _ref2.shouldReduceMotion;
     return {
       x: placement === 'right' ? shouldReduceMotion ? 0 : '100%' : shouldReduceMotion ? 0 : -320,
       transition: {
         duration: motionConstants.DURATIONS.moderate01,
         ease: motionConstants.EASINGS.productive.exit
       },
-      opacity: shouldReduceMotion && 0
+      opacity: shouldReduceMotion ? 0 : 1
     };
   }
 };

package/lib/components/StatusIndicator/StatusIndicatorStep.js

@@ -0,0 +1,94 @@
+/**
+ * Copyright IBM Corp. 2020, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../node_modules/prop-types/index.js');
+var cx = require('classnames');
+var devtools = require('../../global/js/utils/devtools.js');
+var settings = require('../../settings.js');
+var react = require('@carbon/react');
+var icons = require('@carbon/react/icons');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+var _CircleStroke, _InlineLoading, _ErrorOutline, _CheckmarkOutline;
+var _excluded = ["className", "description", "errorMessage", "status"];
+
+// The block part of our conventional BEM class names (blockClass__E--M).
+var blockClass = "".concat(settings.pkg.prefix, "--status-indicator-step");
+var componentName = 'StatusIndicatorStep';
+var defaults = {
+  status: 'inactive'
+};
+
+/**
+ * An icon/description pair that describes one step of the `StatusIndicator`.
+ */
+exports.StatusIndicatorStep = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
+  var className = _ref.className,
+    description = _ref.description,
+    errorMessage = _ref.errorMessage,
+    _ref$status = _ref.status,
+    status = _ref$status === void 0 ? defaults.status : _ref$status,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default["default"].createElement("li", _rollupPluginBabelHelpers["extends"]({}, rest, {
+    className: cx__default["default"](blockClass, className, "".concat(blockClass, "--").concat(status)),
+    ref: ref
+  }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__details")
+  }, /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__icon")
+  }, status === 'inactive' && (_CircleStroke || (_CircleStroke = /*#__PURE__*/React__default["default"].createElement(icons.CircleStroke, {
+    size: 16,
+    viewBox: "1 1 14 14"
+  }))), status === 'active' && (_InlineLoading || (_InlineLoading = /*#__PURE__*/React__default["default"].createElement(react.InlineLoading, null))), status === 'error' && (_ErrorOutline || (_ErrorOutline = /*#__PURE__*/React__default["default"].createElement(icons.ErrorOutline, {
+    size: 16
+  }))), status === 'finished' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React__default["default"].createElement(icons.CheckmarkOutline, {
+    size: 16
+  })))), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__text")
+  }, description)), status === 'error' && errorMessage && /*#__PURE__*/React__default["default"].createElement("div", {
+    className: "".concat(blockClass, "__error-message")
+  }, errorMessage));
+});
+
+// Return a placeholder if not released and not enabled by feature flag
+exports.StatusIndicatorStep = settings.pkg.checkComponentEnabled(exports.StatusIndicatorStep, componentName);
+
+// The display name of the component, used by React. Note that displayName
+// is used in preference to relying on function.name.
+exports.StatusIndicatorStep.displayName = componentName;
+
+// The types and DocGen commentary for the component props,
+// in alphabetical order (for consistency).
+// See https://www.npmjs.com/package/prop-types#usage.
+exports.StatusIndicatorStep.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index["default"].string,
+  /**
+   * The text associated with the icon.
+   */
+  description: index["default"].string.isRequired,
+  /**
+   * This message will appear below the description if the `status` is "error".
+   */
+  errorMessage: index["default"].string,
+  /**
+   * Each `status` represents a different icon..
+   */
+  status: index["default"].oneOf(['inactive', 'active', 'error', 'finished']).isRequired
+};

package/lib/components/Tearsheet/Tearsheet.d.ts

@@ -99,9 +99,16 @@ interface TearsheetProps extends PropsWithChildren {
      */
     portalTarget: ReactNode;
     /**
-     * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
      */
     selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * The main title of the tearsheet, displayed in the header area.
      */

package/lib/components/Tearsheet/Tearsheet.js

@@ -198,9 +198,17 @@ exports.Tearsheet.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**@ts-ignore */
   portalTarget: TearsheetShell.portalType,
   /**
-   * Specify a CSS selector that matches the DOM element that should be focused when the Modal opens
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
    */
   selectorPrimaryFocus: index["default"].string,
+  /**
+   * Specify the CSS selectors that match the floating menus.
+   *
+   * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+   */
+  /**@ts-ignore*/
+  selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/lib/components/Tearsheet/TearsheetNarrow.d.ts

@@ -64,6 +64,17 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * The main title of the tearsheet, displayed in the header area.
      */

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -156,6 +156,18 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   /**@ts-ignore */
   portalTarget: TearsheetShell.portalType,
+  /**
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
+   */
+  selectorPrimaryFocus: index["default"].string,
+  /**
+   * Specify the CSS selectors that match the floating menus.
+   *
+   * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+   */
+  /**@ts-ignore*/
+  selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/lib/components/Tearsheet/TearsheetShell.d.ts

@@ -9,7 +9,7 @@ import React, { PropsWithChildren, ReactNode, RefObject } from 'react';
 import PropTypes from 'prop-types';
 import { type ButtonProps } from '@carbon/react';
 interface TearsheetShellProps extends PropsWithChildren {
-    actions?: ButtonProps[];
+    actions?: ButtonProps<any>[];
     ariaLabel?: string;
     /**
      * An optional class or classes to be added to the outermost element.
@@ -81,7 +81,17 @@ interface TearsheetShellProps extends PropsWithChildren {
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
     selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * Specifies the width of the tearsheet, 'narrow' or 'wide'.
      */

package/lib/components/Tearsheet/TearsheetShell.js

@@ -29,7 +29,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(settings.pkg.prefix, "--tearsheet");
@@ -88,6 +88,8 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     open = _ref.open,
     portalTargetIn = _ref.portalTarget,
     selectorPrimaryFocus = _ref.selectorPrimaryFocus,
+    _ref$selectorsFloatin = _ref.selectorsFloatingMenus,
+    selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
     size = _ref.size,
     slug = _ref.slug,
     title = _ref.title,
@@ -147,7 +149,8 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
   // Callback to give the tearsheet the opportunity to claim focus
   handleStackChange.claimFocus = function () {
     if (selectorPrimaryFocus) {
-      return specifiedElement === null || specifiedElement === void 0 ? void 0 : specifiedElement.focus();
+      var _getSpecificElement;
+      return (_getSpecificElement = useFocus.getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) === null || _getSpecificElement === void 0 ? void 0 : _getSpecificElement.focus();
     }
     firstElement === null || firstElement === void 0 || firstElement.focus();
   };
@@ -258,7 +261,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
-      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
+      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")].concat(_rollupPluginBabelHelpers.toConsumableArray(selectorsFloatingMenus)),
       size: "sm"
     }), includeHeader && /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
       className: cx__default["default"]("".concat(bc, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
@@ -320,7 +323,9 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
 // The display name of the component, used by React. Note that displayName
 // is used in preference to relying on function.name.
 TearsheetShell.displayName = componentName;
-var portalType = typeof Element === 'undefined' ? index["default"].object : index["default"].instanceOf(Element);
+var portalType = typeof Element === 'undefined' ? index["default"].object :
+// eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
+index["default"].instanceOf(Element);
 var deprecatedProps = {
   /**
    * **Deprecated**
@@ -363,6 +368,7 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
     label: index["default"].string,
     loading: index["default"].bool,
     // we duplicate this Button prop to improve the DocGen here
+    /**@ts-ignore*/
     onClick: react.Button.propTypes.onClick
   }))),
   /**
@@ -454,6 +460,18 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   /**@ts-ignore*/
   portalTarget: portalType,
+  /**
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
+   */
+  selectorPrimaryFocus: index["default"].string,
+  /**
+   * Specify the CSS selectors that match the floating menus.
+   *
+   * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+   */
+  /**@ts-ignore*/
+  selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */