@carbon/ibm-products 2.57.0 → 2.57.1-rc.0

package/es/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js

@@ -16,7 +16,7 @@ import { EmptyStateContent } from '../EmptyStateContent.js';
 import { ErrorIllustration } from '../assets/ErrorIllustration.js';
 import { defaults } from '../EmptyState.js';
 
-var _excluded = ["action", "className", "illustrationPosition", "illustrationDescription", "illustrationTheme", "link", "size", "subtitle", "title"];
+var _excluded = ["action", "className", "illustrationPosition", "illustrationDescription", "illustrationTheme", "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 = 'ErrorEmptyState';
@@ -33,6 +33,8 @@ var ErrorEmptyState = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
+    _ref$headingAs = _ref.headingAs,
+    headingAs = _ref$headingAs === void 0 ? defaults.headingAs : _ref$headingAs,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -47,6 +49,7 @@ var ErrorEmptyState = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title || ''
   }));
@@ -77,6 +80,10 @@ ErrorEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 export interface NoDataEmptyStateProps {
@@ -44,6 +44,10 @@ export interface NoDataEmptyStateProps {
         text?: string | ReactNode;
         href?: string;
     };
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
     /**
      * Empty state size
      */

package/es/components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js

@@ -16,7 +16,7 @@ import { EmptyStateContent } from '../EmptyStateContent.js';
 import { NoDataIllustration } from '../assets/NoDataIllustration.js';
 import { defaults } from '../EmptyState.js';
 
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
+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");
@@ -34,6 +34,8 @@ var NoDataEmptyState = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
+    _ref$headingAs = _ref.headingAs,
+    headingAs = _ref$headingAs === void 0 ? defaults.headingAs : _ref$headingAs,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -48,6 +50,7 @@ var NoDataEmptyState = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title || ''
   }));
@@ -78,6 +81,10 @@ NoDataEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 export interface NoTagsEmptyStateProps {
@@ -44,6 +44,10 @@ export interface NoTagsEmptyStateProps {
         text?: string | ReactNode;
         href?: string;
     };
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
     /**
      * Empty state size
      */

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

@@ -16,7 +16,7 @@ import { EmptyStateContent } from '../EmptyStateContent.js';
 import { NoTagsIllustration } from '../assets/NoTagsIllustration.js';
 import { defaults } from '../EmptyState.js';
 
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
+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';
@@ -33,6 +33,8 @@ var NoTagsEmptyState = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
+    _ref$headingAs = _ref.headingAs,
+    headingAs = _ref$headingAs === void 0 ? defaults.headingAs : _ref$headingAs,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -47,6 +49,7 @@ var NoTagsEmptyState = /*#__PURE__*/React__default.forwardRef(function (_ref, re
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title = ''
   }));
@@ -77,6 +80,10 @@ NoTagsEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 export interface NotFoundEmptyStateProps {
@@ -44,6 +44,10 @@ export interface NotFoundEmptyStateProps {
         text?: string | ReactNode;
         href?: string;
     };
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
     /**
      * Empty state size
      */

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

@@ -16,7 +16,7 @@ import { EmptyStateContent } from '../EmptyStateContent.js';
 import { NotFoundIllustration } from '../assets/NotFoundIllustration.js';
 import { defaults } from '../EmptyState.js';
 
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
+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';
@@ -33,6 +33,8 @@ var NotFoundEmptyState = /*#__PURE__*/React__default.forwardRef(function (_ref,
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
+    _ref$headingAs = _ref.headingAs,
+    headingAs = _ref$headingAs === void 0 ? defaults.headingAs : _ref$headingAs,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -47,6 +49,7 @@ var NotFoundEmptyState = /*#__PURE__*/React__default.forwardRef(function (_ref,
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title || ''
   }));
@@ -77,6 +80,10 @@ NotFoundEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 export interface NotificationsEmptyStateProps {
@@ -44,6 +44,10 @@ export interface NotificationsEmptyStateProps {
         text?: string | ReactNode;
         href?: string;
     };
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
     /**
      * Empty state size
      */

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

@@ -16,7 +16,7 @@ import { EmptyStateContent } from '../EmptyStateContent.js';
 import { NotificationsIllustration } from '../assets/NotificationsIllustration.js';
 import { defaults } from '../EmptyState.js';
 
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
+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';
@@ -33,6 +33,8 @@ var NotificationsEmptyState = /*#__PURE__*/React__default.forwardRef(function (_
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
+    _ref$headingAs = _ref.headingAs,
+    headingAs = _ref$headingAs === void 0 ? defaults.headingAs : _ref$headingAs,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -47,6 +49,7 @@ var NotificationsEmptyState = /*#__PURE__*/React__default.forwardRef(function (_
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title || ''
   }));
@@ -77,6 +80,10 @@ NotificationsEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 /// <reference path="../../../../src/custom-typings/index.d.ts" />
-import React, { ReactNode } from 'react';
+import React, { ElementType, ReactNode } from 'react';
 import { ButtonProps } from '@carbon/react';
 import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 export interface UnauthorizedEmptyStateProps {
@@ -44,6 +44,10 @@ export interface UnauthorizedEmptyStateProps {
         text?: string | ReactNode;
         href?: string;
     };
+    /**
+     * Empty state headingAs allows you to customize the type of heading element
+     */
+    headingAs?: (() => ReactNode) | string | ElementType;
     /**
      * Empty state size
      */

package/es/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js

@@ -16,7 +16,7 @@ import { EmptyStateContent } from '../EmptyStateContent.js';
 import { UnauthorizedIllustration } from '../assets/UnauthorizedIllustration.js';
 import { defaults } from '../EmptyState.js';
 
-var _excluded = ["action", "className", "illustrationPosition", "illustrationTheme", "illustrationDescription", "link", "size", "subtitle", "title"];
+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");
@@ -34,6 +34,8 @@ var UnauthorizedEmptyState = /*#__PURE__*/React__default.forwardRef(function (_r
     link = _ref.link,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? defaults.size : _ref$size,
+    _ref$headingAs = _ref.headingAs,
+    headingAs = _ref$headingAs === void 0 ? defaults.headingAs : _ref$headingAs,
     subtitle = _ref.subtitle,
     title = _ref.title,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -48,6 +50,7 @@ var UnauthorizedEmptyState = /*#__PURE__*/React__default.forwardRef(function (_r
     action: action,
     link: link,
     size: size,
+    headingAs: headingAs,
     subtitle: subtitle,
     title: title || ''
   }));
@@ -78,6 +81,10 @@ UnauthorizedEmptyState.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * Empty state headingAs allows you to customize the type of heading element
+   */
+  headingAs: PropTypes.elementType,
   /**
    * The alt text for empty state svg images. If not provided , title will be used.
    */

package/es/components/EmptyStates/assets/ErrorIllustration.js

@@ -29,7 +29,8 @@ var ErrorIllustration = function ErrorIllustration(_ref) {
     height: 80,
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-error"), "".concat(blockClass, "__illustration--").concat(size)]),
-    role: "img"
+    role: "img",
+    "aria-hidden": "true"
   }), /*#__PURE__*/React__default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 38.9,

package/es/components/EmptyStates/assets/NoDataIllustration.js

@@ -29,7 +29,8 @@ var NoDataIllustration = function NoDataIllustration(_ref) {
     height: 80,
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noData"), "".concat(blockClass, "__illustration--").concat(size)]),
-    role: "img"
+    role: "img",
+    "aria-hidden": "true"
   }), /*#__PURE__*/React__default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 11.12,

package/es/components/EmptyStates/assets/NoTagsIllustration.js

@@ -30,7 +30,8 @@ var NoTagsIllustration = function NoTagsIllustration(_ref) {
     height: 80,
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-noTags"), "".concat(blockClass, "__illustration--").concat(size)]),
-    role: "img"
+    role: "img",
+    "aria-hidden": "true"
   }), /*#__PURE__*/React__default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
     id: "prefix__c_dark_".concat(svgId),
     x1: 34.96,

package/es/components/EmptyStates/assets/NotFoundIllustration.js

@@ -29,7 +29,8 @@ var NotFoundIllustration = function NotFoundIllustration(_ref) {
     height: 80,
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notFound"), "".concat(blockClass, "__illustration--").concat(size)]),
-    role: "img"
+    role: "img",
+    "aria-hidden": "true"
   }), /*#__PURE__*/React__default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 2.6,

package/es/components/EmptyStates/assets/NotificationsIllustration.js

@@ -28,7 +28,8 @@ var NotificationsIllustration = function NotificationsIllustration(_ref) {
     width: 80,
     height: 80,
     viewBox: "0 0 80 80",
-    className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)])
+    className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-notification"), "".concat(blockClass, "__illustration--").concat(size)]),
+    "aria-hidden": "true"
   }), /*#__PURE__*/React__default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
     id: "prefix__a_dark_".concat(svgId),
     x1: 30.05,

package/es/components/EmptyStates/assets/UnauthorizedIllustration.js

@@ -30,7 +30,8 @@ var UnauthorizedIllustration = function UnauthorizedIllustration(_ref) {
     height: 80,
     viewBox: "0 0 80 80",
     className: cx(["".concat(blockClass, "__illustration"), "".concat(blockClass, "__illustration-unauthorized"), "".concat(blockClass, "__illustration--").concat(size)]),
-    role: "img"
+    role: "img",
+    "aria-hidden": "true"
   }), /*#__PURE__*/React__default.createElement("title", null, alt), theme === 'dark' ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
     id: "prefix__b_dark_".concat(svgId),
     x1: 17.33,

package/es/components/FilterSummary/FilterSummary.js

@@ -126,7 +126,7 @@ var FilterSummary = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     ref: localRef,
     className: cx([blockClass, className], _defineProperty({}, "".concat(blockClass, "__expanded"), multiline))
   }), /*#__PURE__*/React__default.createElement(AnimatePresence, {
-    mode: "wait"
+    exitBeforeEnter: true
   }, !multiline && renderTagSet('single'), multiline && renderTagSet('multiline')), /*#__PURE__*/React__default.createElement(Button, {
     kind: "ghost",
     size: "sm",

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

@@ -9,11 +9,6 @@ import PropTypes from 'prop-types';
 import { TearsheetAction } from './Tearsheet';
 interface TearsheetShellProps extends PropsWithChildren {
     actions?: TearsheetAction[];
-    /**
-     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency,
-     * accountability, and explainability at the UI level.
-     */
-    aiLabel?: ReactNode;
     ariaLabel?: string;
     /**
      * An optional class or classes to be added to the outermost element.
@@ -23,6 +18,10 @@ interface TearsheetShellProps extends PropsWithChildren {
      * Used to track the current step on components which use `StepsContext` and `TearsheetShell`
      */
     currentStep?: number;
+    /**
+     * Optional prop that allows you to pass any component.
+     */
+    decorator?: ReactNode;
     /**
      * A description of the flow, displayed in the header area of the tearsheet.
      */
@@ -36,6 +35,11 @@ interface TearsheetShellProps extends PropsWithChildren {
      * this prop to either true or false.
      */
     hasCloseIcon?: boolean;
+    /**
+     * To indicate an error occurred in the Tearsheet step
+     * Mainly used by CreateTearsheet component to pass error state
+     */
+    hasError?: boolean;
     /**
      * The content for the header actions area, displayed alongside the title in
      * the header area of the tearsheet. This is typically a drop-down, or a set
@@ -110,7 +114,7 @@ interface TearsheetShellProps extends PropsWithChildren {
     title?: ReactNode;
     verticalPosition?: 'normal' | 'lower';
     /**
-     * @deprecated Property replaced by `aiLabel`
+     * @deprecated Property replaced by `decorator`
      */
     slug?: ReactNode;
 }
@@ -135,7 +139,7 @@ export declare const TearsheetShell: React.ForwardRefExoticComponent<(TearsheetS
 export declare const portalType: PropTypes.Requireable<object>;
 export declare const deprecatedProps: {
     /**
-     *  @deprecated Property replaced by `aiLabel`
+     *  @deprecated Property replaced by `decorator`
      */
     slug: (props: any, propName: any, comp: any, loc: any, propFullName: any, secret: any) => any;
     /**

package/es/components/Tearsheet/TearsheetShell.js

@@ -21,7 +21,7 @@ import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { useFocus, claimFocus } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
-var _excluded = ["actions", "aiLabel", "ariaLabel", "children", "className", "closeIconDescription", "currentStep", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+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"];
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(pkg.prefix, "--tearsheet");
 var componentName = 'TearsheetShell';
@@ -63,7 +63,7 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
  * */
 var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
-    aiLabel = _ref.aiLabel,
+    decorator = _ref.decorator,
     ariaLabel = _ref.ariaLabel,
     children = _ref.children,
     className = _ref.className,
@@ -71,6 +71,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     currentStep = _ref.currentStep,
     description = _ref.description,
     hasCloseIcon = _ref.hasCloseIcon,
+    hasError = _ref.hasError,
     headerActions = _ref.headerActions,
     influencer = _ref.influencer,
     influencerPosition = _ref.influencerPosition,
@@ -142,7 +143,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       // Focusing the first element or selectorPrimaryFocus element
       claimFocus(firstElement, modalRef, selectorPrimaryFocus);
     }
-  }, [currentStep, depth, firstElement, modalRef, modalRefValue, open, position, selectorPrimaryFocus]);
+  }, [currentStep, depth, firstElement, modalRef, modalRefValue, open, position, selectorPrimaryFocus, hasError]);
   useEffect(function () {
     if (prevOpen && !open && launcherButtonRef) {
       setTimeout(function () {
@@ -189,7 +190,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     };
   }, [open, size]);
   if (position <= depth) {
-    var _prevDepth$current;
+    var _prevDepth$current, _decorator$type, _decorator$type2;
     // Include a modal header if and only if one or more of these is given.
     // We can't use a Wrap for the ModalHeader because ComposedModal requires
     // the direct child to be the ModalHeader instance.
@@ -210,10 +211,10 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       enableExperimentalFocusWrapWithoutSentinels: true
     }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent(title),
-      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".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 = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), deprecated_slug), "".concat(bc, "--has-ai-label"), aiLabel), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
-      slug: aiLabel || deprecated_slug,
+      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), deprecated_slug), "".concat(bc, "--has-ai-label"), !!decorator && ((_decorator$type = decorator['type']) === null || _decorator$type === void 0 ? void 0 : _decorator$type.displayName) === 'AILabel'), "".concat(bc, "--has-decorator"), !!decorator && ((_decorator$type2 = decorator['type']) === null || _decorator$type2 === void 0 ? void 0 : _decorator$type2.displayName) !== 'AILabel'), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      decorator: decorator || deprecated_slug,
       style: setScaleValues(),
       containerClassName: cx("".concat(bc, "__container"), _defineProperty(_defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
       onClose: onClose,
@@ -291,9 +292,9 @@ var portalType = typeof Element === 'undefined' ? PropTypes.object :
 PropTypes.instanceOf(Element);
 var deprecatedProps = {
   /**
-   *  @deprecated Property replaced by `aiLabel`
+   *  @deprecated Property replaced by `decorator`
    */
-  slug: deprecateProp(PropTypes.node, 'Property replaced by `aiLabel`'),
+  slug: deprecateProp(PropTypes.node, 'Property replaced by `decorator`'),
   /**
    * **Deprecated**
    *
@@ -338,11 +339,6 @@ TearsheetShell.propTypes = _objectSpread2({
     /**@ts-ignore*/
     onClick: Button.propTypes.onClick
   }))),
-  /**
-   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency,
-   * accountability, and explainability at the UI level.
-   */
-  aiLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**
    * The main content of the tearsheet.
    */
@@ -363,6 +359,10 @@ TearsheetShell.propTypes = _objectSpread2({
       hasCloseIcon = _ref4.hasCloseIcon;
     return tearsheetHasCloseIcon(actions, hasCloseIcon);
   }),
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */

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

@@ -16,6 +16,7 @@ var getSpecificElement = function getSpecificElement(parentEl, elementId) {
   return elementId && !(element !== null && element !== void 0 && element.disabled) ? element : null;
 };
 var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
+  var _getFocusable2, _getFocusable3, _getFocusable4, _getFocusable5;
   var carbonPrefix = usePrefix();
   var tearsheetBaseClass = "".concat(pkg.prefix, "--tearsheet");
   var sidePanelBaseClass = "".concat(pkg.prefix, "--side-panel");
@@ -29,15 +30,15 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var querySelect = "select".concat(notQuery);
   var queryTextarea = "textarea".concat(notQuery);
   var queryLink = "[href]".concat(notQuery);
+  var queryAnchor = "a".concat(notQuery);
   var queryTabIndex = "[tabindex=\"0\"]".concat(notQuery);
   var querySidePanelScroll = ".".concat(sidePanelBaseClass, "--scrolls");
   // Final query
-  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ",").concat(queryTabIndex, ",").concat(querySidePanelScroll);
-  var modalEl = modalRef === null || modalRef === void 0 ? void 0 : modalRef.current;
+  var query = "".concat(queryButton, ",").concat(queryLink, ",").concat(queryAnchor, ",").concat(queryInput, ",").concat(querySelect, ",").concat(queryTextarea, ",").concat(queryTabIndex, ",").concat(querySidePanelScroll);
   var getFocusable = useCallback(function () {
-    var _focusableElements, _focusableElements2, _focusableElements3, _focusableElements4;
+    var _modalRef$current, _focusableElements, _focusableElements2, _focusableElements3, _focusableElements4;
     // Selecting all focusable elements based on the above conditions
-    var focusableElements = modalEl === null || modalEl === void 0 ? void 0 : modalEl.querySelectorAll("".concat(query));
+    var focusableElements = modalRef === null || modalRef === void 0 || (_modalRef$current = modalRef.current) === null || _modalRef$current === void 0 ? void 0 : _modalRef$current.querySelectorAll("".concat(query));
     if ((_focusableElements = focusableElements) !== null && _focusableElements !== void 0 && _focusableElements.length) {
       focusableElements = Array.prototype.filter.call(focusableElements, function (el) {
         var _window;
@@ -47,17 +48,17 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
     var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
     var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
     var all = focusableElements;
-    var specified = getSpecificElement(modalEl, selectorPrimaryFocus);
+    var specified = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
     return {
       first: first,
       last: last,
       all: all,
       specified: specified
     };
-  }, [modalEl, query, selectorPrimaryFocus]);
+  }, [modalRef, query, selectorPrimaryFocus]);
   useEffect(function () {
     getFocusable();
-  }, [getFocusable]);
+  }, [getFocusable, modalRef]);
   var handleKeyDown = /*#__PURE__*/function () {
     var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(event) {
       var _document, _document2, _getFocusable, first, last, all;
@@ -95,10 +96,10 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
     };
   }();
   return {
-    firstElement: getFocusable().first,
-    lastElement: getFocusable().last,
-    allElements: getFocusable().all,
-    specifiedElement: getFocusable().specified,
+    firstElement: (_getFocusable2 = getFocusable()) === null || _getFocusable2 === void 0 ? void 0 : _getFocusable2.first,
+    lastElement: (_getFocusable3 = getFocusable()) === null || _getFocusable3 === void 0 ? void 0 : _getFocusable3.last,
+    allElements: (_getFocusable4 = getFocusable()) === null || _getFocusable4 === void 0 ? void 0 : _getFocusable4.all,
+    specifiedElement: (_getFocusable5 = getFocusable()) === null || _getFocusable5 === void 0 ? void 0 : _getFocusable5.specified,
     keyDownListener: handleKeyDown,
     getFocusable: getFocusable
   };
@@ -111,15 +112,16 @@ var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
  * @param {string | undefined} selectorPrimaryFocus
  */
 var claimFocus = function claimFocus(firstElement, modalRef) {
+  var _window2, _specifiedEl;
   var selectorPrimaryFocus = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
-  if (selectorPrimaryFocus && getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus)) {
-    var _window2;
-    var specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
-    if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none') {
-      setTimeout(function () {
-        return specifiedEl.focus();
-      }, 0);
-    }
+  var specifiedEl;
+  if (selectorPrimaryFocus) {
+    specifiedEl = getSpecificElement(modalRef === null || modalRef === void 0 ? void 0 : modalRef.current, selectorPrimaryFocus);
+  }
+  if (specifiedEl && ((_window2 = window) === null || _window2 === void 0 || (_window2 = _window2.getComputedStyle(specifiedEl)) === null || _window2 === void 0 ? void 0 : _window2.display) !== 'none' && ((_specifiedEl = specifiedEl) === null || _specifiedEl === void 0 ? void 0 : _specifiedEl.tabIndex) !== -1) {
+    setTimeout(function () {
+      return specifiedEl.focus();
+    }, 0);
   } else {
     setTimeout(function () {
       return firstElement === null || firstElement === void 0 ? void 0 : firstElement.focus();