@carbon/ibm-products 2.63.0 → 2.64.0

package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.d.ts

@@ -4,31 +4,9 @@
  * 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, { ElementType, ReactNode } from 'react';
-import { ButtonProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-export interface NoTagsEmptyStateProps {
-    /**
-     * Empty state action button
-     */
-    action?: {
-        kind?: 'primary' | 'secondary' | 'tertiary';
-        renderIcon?: CarbonIconType;
-        onClick?: ButtonProps<React.ElementType>['onClick'];
-        text?: string;
-    };
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * The alt text for empty state svg images. If not provided , title will be used.
-     */
-    illustrationDescription?: string;
-    /**
-     * Designates the position of the illustration relative to the content
-     */
-    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+import React from 'react';
+import { EmptyStatePresetProps } from '../EmptyState';
+export interface NoTagsEmptyStateProps extends EmptyStatePresetProps {
     /**
      * Empty state illustration theme variations.
      * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -36,29 +14,6 @@ export interface NoTagsEmptyStateProps {
      * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
      */
     illustrationTheme?: 'light' | 'dark';
-    /**
-     * Empty state link object
-     */
-    link?: {
-        text?: string | ReactNode;
-        href?: string;
-    };
-    /**
-     * Empty state headingAs allows you to customize the type of heading element
-     */
-    headingAs?: (() => ReactNode) | string | ElementType;
-    /**
-     * Empty state size
-     */
-    size?: 'lg' | 'sm';
-    /**
-     * Empty state subtitle
-     */
-    subtitle?: string | ReactNode;
-    /**
-     * Empty state title
-     */
-    title: string | ReactNode;
 }
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.

package/es/components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js

@@ -17,6 +17,7 @@ import { NoTagsIllustration } from '../assets/NoTagsIllustration.js';
 import { defaults } from '../EmptyState.js';
 
 var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "headingAs", "subtitle", "title"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'NoTagsEmptyState';

package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.d.ts

@@ -4,31 +4,9 @@
  * 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, { ElementType, ReactNode } from 'react';
-import { ButtonProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-export interface NotFoundEmptyStateProps {
-    /**
-     * Empty state action button
-     */
-    action?: {
-        kind?: 'primary' | 'secondary' | 'tertiary';
-        renderIcon?: CarbonIconType;
-        onClick?: ButtonProps<React.ElementType>['onClick'];
-        text?: string;
-    };
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * The alt text for empty state svg images. If not provided , title will be used.
-     */
-    illustrationDescription?: string;
-    /**
-     * Designates the position of the illustration relative to the content
-     */
-    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+import React from 'react';
+import { EmptyStatePresetProps } from '../EmptyState';
+export interface NotFoundEmptyStateProps extends EmptyStatePresetProps {
     /**
      * Empty state illustration theme variations.
      * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -36,29 +14,6 @@ export interface NotFoundEmptyStateProps {
      * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
      */
     illustrationTheme?: 'light' | 'dark';
-    /**
-     * Empty state link object
-     */
-    link?: {
-        text?: string | ReactNode;
-        href?: string;
-    };
-    /**
-     * Empty state headingAs allows you to customize the type of heading element
-     */
-    headingAs?: (() => ReactNode) | string | ElementType;
-    /**
-     * Empty state size
-     */
-    size?: 'lg' | 'sm';
-    /**
-     * Empty state subtitle
-     */
-    subtitle: string | ReactNode;
-    /**
-     * Empty state title
-     */
-    title: string | ReactNode;
 }
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.

package/es/components/EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js

@@ -17,6 +17,7 @@ import { NotFoundIllustration } from '../assets/NotFoundIllustration.js';
 import { defaults } from '../EmptyState.js';
 
 var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "headingAs", "subtitle", "title"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'NotFoundEmptyState';

package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.d.ts

@@ -4,31 +4,9 @@
  * 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, { ElementType, ReactNode } from 'react';
-import { ButtonProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-export interface NotificationsEmptyStateProps {
-    /**
-     * Empty state action button
-     */
-    action?: {
-        kind?: 'primary' | 'secondary' | 'tertiary';
-        renderIcon?: CarbonIconType;
-        onClick?: ButtonProps<React.ElementType>['onClick'];
-        text?: string;
-    };
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * The alt text for empty state svg images. If not provided , title will be used.
-     */
-    illustrationDescription?: string;
-    /**
-     * Designates the position of the illustration relative to the content
-     */
-    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+import React from 'react';
+import { EmptyStatePresetProps } from '../EmptyState';
+export interface NotificationsEmptyStateProps extends EmptyStatePresetProps {
     /**
      * Empty state illustration theme variations.
      * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -36,29 +14,6 @@ export interface NotificationsEmptyStateProps {
      * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
      */
     illustrationTheme?: 'light' | 'dark';
-    /**
-     * Empty state link object
-     */
-    link?: {
-        text?: string | ReactNode;
-        href?: string;
-    };
-    /**
-     * Empty state headingAs allows you to customize the type of heading element
-     */
-    headingAs?: (() => ReactNode) | string | ElementType;
-    /**
-     * Empty state size
-     */
-    size?: 'lg' | 'sm';
-    /**
-     * Empty state subtitle
-     */
-    subtitle: ReactNode;
-    /**
-     * Empty state title
-     */
-    title: ReactNode;
 }
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.

package/es/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js

@@ -17,6 +17,7 @@ import { NotificationsIllustration } from '../assets/NotificationsIllustration.j
 import { defaults } from '../EmptyState.js';
 
 var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "headingAs", "subtitle", "title"];
+
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--empty-state");
 var componentName = 'NotificationsEmptyState';

package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.d.ts

@@ -4,31 +4,9 @@
  * 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, { ElementType, ReactNode } from 'react';
-import { ButtonProps } from '@carbon/react';
-import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
-export interface UnauthorizedEmptyStateProps {
-    /**
-     * Empty state action button
-     */
-    action?: {
-        kind?: 'primary' | 'secondary' | 'tertiary';
-        renderIcon?: CarbonIconType;
-        onClick?: ButtonProps<React.ElementType>['onClick'];
-        text?: string;
-    };
-    /**
-     * Provide an optional class to be applied to the containing node.
-     */
-    className?: string;
-    /**
-     * The alt text for empty state svg images. If not provided , title will be used.
-     */
-    illustrationDescription?: string;
-    /**
-     * Designates the position of the illustration relative to the content
-     */
-    illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+import React from 'react';
+import { EmptyStatePresetProps } from '../EmptyState';
+export interface UnauthorizedEmptyStateProps extends EmptyStatePresetProps {
     /**
      * Empty state illustration theme variations.
      * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
@@ -36,29 +14,6 @@ export interface UnauthorizedEmptyStateProps {
      * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
      */
     illustrationTheme?: 'light' | 'dark';
-    /**
-     * Empty state link object
-     */
-    link?: {
-        text?: string | ReactNode;
-        href?: string;
-    };
-    /**
-     * Empty state headingAs allows you to customize the type of heading element
-     */
-    headingAs?: (() => ReactNode) | string | ElementType;
-    /**
-     * Empty state size
-     */
-    size?: 'lg' | 'sm';
-    /**
-     * Empty state subtitle
-     */
-    subtitle: string | ReactNode;
-    /**
-     * Empty state title
-     */
-    title: string | ReactNode;
 }
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.

package/es/components/InterstitialScreen/InterstitialScreen.js

@@ -202,7 +202,8 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (props,
       if (/*#__PURE__*/isValidElement(child)) {
         return /*#__PURE__*/React__default.createElement(ProgressStep, {
           key: idx,
-          label: child.props.stepTitle || ''
+          label: child.props.stepTitle || '',
+          translateWithId: child.props.translateWithId
         });
       }
     })))), /*#__PURE__*/React__default.createElement(ModalBody, {
@@ -234,7 +235,8 @@ var InterstitialScreen = /*#__PURE__*/React__default.forwardRef(function (props,
       if (/*#__PURE__*/isValidElement(child)) {
         return /*#__PURE__*/React__default.createElement(ProgressStep, {
           key: idx,
-          label: child.props.stepTitle || ''
+          label: child.props.stepTitle || '',
+          translateWithId: child.props.translateWithId
         });
       }
     })))), childElements, renderFooter()));

package/es/components/InterstitialScreenView/InterstitialScreenView.d.ts

@@ -18,6 +18,10 @@ export interface InterstitialScreenViewProps extends PropsWithChildren {
      * The label to pass to the ProgressStep component.
      */
     stepTitle: string;
+    /**
+     * Optional method that takes in a message id and returns an internationalized string.
+     */
+    translateWithId?: (id: string) => string;
 }
 /**
  * An Onboarding component intended to be used as the child elements of the InterstitialScreen component.

package/es/components/InterstitialScreenView/InterstitialScreenView.js

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 
-var _excluded = ["children", "className", "stepTitle"];
+var _excluded = ["children", "className", "stepTitle", "translateWithId"];
 
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
@@ -26,8 +26,9 @@ var componentName = 'InterstitialScreenView';
 var InterstitialScreenView = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     className = _ref.className,
-    stepTitle = _ref.stepTitle,
-    rest = _objectWithoutProperties(_ref, _excluded);
+    stepTitle = _ref.stepTitle;
+    _ref.translateWithId;
+    var rest = _objectWithoutProperties(_ref, _excluded);
   return /*#__PURE__*/React__default.createElement("div", _extends({
     role: "complementary",
     "aria-label": stepTitle
@@ -67,7 +68,11 @@ InterstitialScreenView.propTypes = {
   /**
    * The label to pass to the ProgressStep component.
    */
-  stepTitle: PropTypes.string.isRequired
+  stepTitle: PropTypes.string.isRequired,
+  /**
+   * Optional method that takes in a message id and returns an internationalized string.
+   */
+  translateWithId: PropTypes.func
 };
 
 export { InterstitialScreenView };

package/es/components/OptionsTile/OptionsTile.js

@@ -8,7 +8,7 @@
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import * as carbonMotion from '@carbon/motion';
 import { ChevronDown, Locked, WarningFilled, WarningAltFilled } from '@carbon/react/icons';
-import { Toggle, Layer } from '@carbon/react';
+import { Toggle, Layer, Section, Heading } from '@carbon/react';
 import React__default, { useState, useRef } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -148,9 +148,9 @@ var OptionsTile = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     var hasValidationState = invalid || warn || locked;
     var summaryHidden = !hasValidationState && enabled === false;
     var summaryClasses = cx("".concat(blockClass, "__summary"), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__summary--closing"), closing), "".concat(blockClass, "__summary--open"), open), "".concat(blockClass, "__summary--invalid"), invalid), "".concat(blockClass, "__summary--warn"), warn), "".concat(blockClass, "__summary--locked"), locked), "".concat(blockClass, "__summary--hidden"), summaryHidden));
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(Section, {
       className: "".concat(blockClass, "__heading")
-    }, /*#__PURE__*/React__default.createElement("h6", {
+    }, /*#__PURE__*/React__default.createElement(Heading, {
       id: titleId,
       className: "".concat(blockClass, "__title")
     }, title), text && /*#__PURE__*/React__default.createElement("span", {

package/es/components/ProductiveCard/ProductiveCard.d.ts

@@ -3,16 +3,16 @@ import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 type ActionIcon = {
     id?: string;
     icon?: CarbonIconType;
-    onKeyDown?(): void;
-    onClick?(): void;
+    onClick?: (event: MouseEvent) => void;
+    onKeydown?: (event: KeyboardEvent) => void;
     iconDescription?: string;
     href?: string;
 };
 type overflowAction = {
     id?: string;
     itemText?: string;
-    onClick?: () => void;
-    onKeydown?: () => void;
+    onClick?: (event: MouseEvent) => void;
+    onKeydown?: (event: KeyboardEvent) => void;
 };
 type PlacementType = 'top' | 'bottom';
 type ClickZoneType = 'one' | 'two' | 'three';
@@ -52,7 +52,11 @@ export interface ProductiveCardProps extends PropsWithChildren {
     /**
      * Provides the callback for a clickable card
      */
-    onClick?: () => void;
+    onClick?: (event: MouseEvent) => void;
+    /**
+     * Provides the callback for keydown events on the card
+     */
+    onKeyDown?: (event: KeyboardEvent) => void;
     /**
      * Function that's called from the primary button or action icon
      */

package/es/components/SimpleHeader/SimpleHeader.js

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { isRequiredIf } from '../../global/js/utils/props-helper.js';
-import { Tooltip } from '@carbon/react';
+import { Heading, Tooltip } from '@carbon/react';
 import { BreadcrumbWithOverflow } from '../BreadcrumbWithOverflow/BreadcrumbWithOverflow.js';
 
 var _excluded = ["breadcrumbs", "className", "title", "noTrailingSlash", "maxVisible", "overflowAriaLabel", "overflowTooltipAlign"];
@@ -57,7 +57,7 @@ var SimpleHeader = function SimpleHeader(_ref) {
     maxVisible: maxVisible,
     overflowAriaLabel: overflowAriaLabel,
     overflowTooltipAlign: overflowTooltipAlign
-  }), title && /*#__PURE__*/React__default.createElement("h1", {
+  }), title && /*#__PURE__*/React__default.createElement(Heading, {
     className: cx("".concat(blockClass, "__title"))
   }, title));
 };

package/es/components/Tearsheet/TearsheetShell.js

@@ -15,15 +15,16 @@ import pconsole from '../../global/js/utils/pconsole.js';
 import { getNodeTextContent as _getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
 import { deprecateProp } from '../../global/js/utils/props-helper.js';
 import { checkHeightOverflow } from '../../global/js/utils/checkForOverflow.js';
-import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Layer, DefinitionTooltip } from '@carbon/react';
+import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Layer, DefinitionTooltip, Section } from '@carbon/react';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { Wrap } from '../../global/js/utils/Wrap.js';
 import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
-import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
+import { useFocus } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
-var _excluded = ["actions", "decorator", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "hasError", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["children"],
+  _excluded2 = ["actions", "decorator", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "hasError", "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(pkg.prefix, "--tearsheet");
 var componentName = 'TearsheetShell';
@@ -56,6 +57,18 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
   return hasCloseIcon !== null && hasCloseIcon !== void 0 ? hasCloseIcon : tearsheetIsPassive(actions);
 };
 
+/**
+ * Since the Tearsheet has an H3 heading, any headings inside the Tearsheet should start at H4.
+ * This is a helper to do that.
+ */
+var SectionLevel3 = function SectionLevel3(_ref) {
+  var children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React__default.createElement(Section, _extends({
+    level: 3
+  }, rest), children);
+};
+
 /**
  *  TearSheetShell is used internally by TearSheet and TearSheetNarrow
  *
@@ -63,36 +76,36 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
  *
  * See the canvas tab for the component API details.
  * */
-var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
-  var actions = _ref.actions,
-    decorator = _ref.decorator,
-    ariaLabel = _ref.ariaLabel,
-    children = _ref.children,
-    className = _ref.className,
-    _ref$closeIconDescrip = _ref.closeIconDescription,
-    closeIconDescription = _ref$closeIconDescrip === void 0 ? 'Close' : _ref$closeIconDescrip,
-    currentStep = _ref.currentStep,
-    description = _ref.description,
-    hasCloseIcon = _ref.hasCloseIcon,
-    hasError = _ref.hasError,
-    headerActions = _ref.headerActions,
-    influencer = _ref.influencer,
-    influencerPosition = _ref.influencerPosition,
-    influencerWidth = _ref.influencerWidth,
-    label = _ref.label,
-    navigation = _ref.navigation,
-    onClose = _ref.onClose,
-    open = _ref.open,
-    portalTargetIn = _ref.portalTarget,
-    selectorPrimaryFocus = _ref.selectorPrimaryFocus,
-    _ref$selectorsFloatin = _ref.selectorsFloatingMenus,
-    selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
-    size = _ref.size,
-    deprecated_slug = _ref.slug,
-    title = _ref.title,
-    verticalPosition = _ref.verticalPosition,
-    launcherButtonRef = _ref.launcherButtonRef,
-    rest = _objectWithoutProperties(_ref, _excluded);
+var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref) {
+  var actions = _ref2.actions,
+    decorator = _ref2.decorator,
+    ariaLabel = _ref2.ariaLabel,
+    children = _ref2.children,
+    className = _ref2.className,
+    _ref2$closeIconDescri = _ref2.closeIconDescription,
+    closeIconDescription = _ref2$closeIconDescri === void 0 ? 'Close' : _ref2$closeIconDescri,
+    currentStep = _ref2.currentStep,
+    description = _ref2.description,
+    hasCloseIcon = _ref2.hasCloseIcon,
+    hasError = _ref2.hasError,
+    headerActions = _ref2.headerActions,
+    influencer = _ref2.influencer,
+    influencerPosition = _ref2.influencerPosition,
+    influencerWidth = _ref2.influencerWidth,
+    label = _ref2.label,
+    navigation = _ref2.navigation,
+    onClose = _ref2.onClose,
+    open = _ref2.open,
+    portalTargetIn = _ref2.portalTarget,
+    selectorPrimaryFocus = _ref2.selectorPrimaryFocus,
+    _ref2$selectorsFloati = _ref2.selectorsFloatingMenus,
+    selectorsFloatingMenus = _ref2$selectorsFloati === void 0 ? [] : _ref2$selectorsFloati,
+    size = _ref2.size,
+    deprecated_slug = _ref2.slug,
+    title = _ref2.title,
+    verticalPosition = _ref2.verticalPosition,
+    launcherButtonRef = _ref2.launcherButtonRef,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
   var carbonPrefix = usePrefix();
   var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
   var renderPortalUse = usePortalTarget(portalTargetIn);
@@ -104,9 +117,9 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     width = _useResizeObserver.width;
   var prevOpen = usePreviousValue(open);
   var _useFocus = useFocus(modalRef, selectorPrimaryFocus),
-    firstElement = _useFocus.firstElement,
-    keyDownListener = _useFocus.keyDownListener;
-  var modalRefValue = modalRef.current;
+    keyDownListener = _useFocus.keyDownListener,
+    claimFocus = _useFocus.claimFocus;
+  modalRef.current;
   var descriptionRef = useRef(null);
   var isOverflowing = checkHeightOverflow(descriptionRef.current);
   var descriptionContent = /*#__PURE__*/React__default.createElement("span", {
@@ -142,18 +155,32 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     setPosition(newPosition);
   }
   useEffect(function () {
-    if (open && position === depth) {
-      // Focusing the first element or selectorPrimaryFocus element
-      claimFocus(firstElement, modalRef, selectorPrimaryFocus);
+    if (open) {
+      claimFocus();
     }
-  }, [currentStep, depth, firstElement, modalRef, modalRefValue, open, position, selectorPrimaryFocus, hasError]);
+  }, [open, currentStep, effectiveHasCloseIcon, claimFocus]);
   useEffect(function () {
-    if (prevOpen && !open && launcherButtonRef) {
+    if (prevOpen && !open && launcherButtonRef !== null && launcherButtonRef !== void 0 && launcherButtonRef.current) {
       setTimeout(function () {
-        launcherButtonRef.current.focus();
+        launcherButtonRef === null || launcherButtonRef === void 0 || launcherButtonRef.current.focus();
       }, 0);
     }
-  }, [launcherButtonRef, open, prevOpen]);
+  }, [open, prevOpen, launcherButtonRef]);
+  useEffect(function () {
+    requestAnimationFrame(function () {
+      var _modalRef$current;
+      if (open && depth === position && !(modalRef !== null && modalRef !== void 0 && (_modalRef$current = modalRef.current) !== null && _modalRef$current !== void 0 && _modalRef$current.contains(document.activeElement))) {
+        claimFocus();
+      }
+    });
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [claimFocus, depth, modalRef, position]);
+  useEffect(function () {
+    var _modalRef$current2;
+    if (hasError && !(modalRef !== null && modalRef !== void 0 && (_modalRef$current2 = modalRef.current) !== null && _modalRef$current2 !== void 0 && _modalRef$current2.contains(document.activeElement))) {
+      claimFocus();
+    }
+  }, [claimFocus, hasError, modalRef]);
   useEffect(function () {
     var notify = function notify() {
       return stack.all.forEach(function (handler) {
@@ -203,10 +230,10 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       return _defineProperty(_defineProperty({}, "--".concat(bc, "--stacking-scale-factor-single"), (width - 32) / width), "--".concat(bc, "--stacking-scale-factor-double"), (width - 64) / width);
     };
     if (modalRef.current) {
-      Object.entries(setScaleValues()).map(function (_ref4) {
-        var _ref5 = _slicedToArray(_ref4, 2),
-          key = _ref5[0],
-          value = _ref5[1];
+      Object.entries(setScaleValues()).map(function (_ref5) {
+        var _ref6 = _slicedToArray(_ref5, 2),
+          key = _ref6[0],
+          value = _ref6[1];
         modalRef.current.style.setProperty(key, String(value));
       });
     }
@@ -270,7 +297,8 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       className: "".concat(carbonPrefix, "--modal-content ").concat(bc, "__body")
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: cx(_defineProperty(_defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
-      neverRender: influencerPosition === 'right'
+      neverRender: influencerPosition === 'right',
+      element: SectionLevel3
     }, influencer), /*#__PURE__*/React__default.createElement(Wrap, {
       className: "".concat(bc, "__right")
     }, /*#__PURE__*/React__default.createElement(Wrap, {
@@ -279,10 +307,12 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: "".concat(bc, "__content"),
       alwaysRender: !!(influencer && influencerPosition === 'right'),
-      tabIndex: -1
+      tabIndex: -1,
+      element: SectionLevel3
     }, children), /*#__PURE__*/React__default.createElement(Wrap, {
       className: cx(_defineProperty(_defineProperty({}, "".concat(bc, "__influencer"), true), "".concat(bc, "__influencer--wide"), influencerWidth === 'wide')),
-      neverRender: influencerPosition !== 'right'
+      neverRender: influencerPosition !== 'right',
+      element: SectionLevel3
     }, influencer)), includeActions && /*#__PURE__*/React__default.createElement(Wrap, {
       className: "".concat(bc, "__button-container")
     }, /*#__PURE__*/React__default.createElement(ActionSet, {

package/es/global/js/hooks/useFocus.d.ts

@@ -11,5 +11,5 @@ export function useFocus(modalRef: any, selectorPrimaryFocus: any): {
         all: any;
         specified: any;
     };
+    claimFocus: () => void;
 };
-export function claimFocus(firstElement: any, modalRef: any, selectorPrimaryFocus?: string | undefined): void;