@carbon/ibm-products 2.79.0 → 2.80.0-rc.0

package/es/components/PageHeader/next/PageHeader.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useState, useRef, useEffect, useLayoutEffect, useCallback } from 'react';
+import React__default, { forwardRef, useState, useRef, useEffect, useCallback } from 'react';
 import PropTypes from '../../../_virtual/index.js';
 import cx from 'classnames';
 import { Grid, Column, Section, DefinitionTooltip, unstable_Text, Heading, Popover, PopoverContent, IconButton, BreadcrumbItem, usePrefix, Breadcrumb, MenuButton, MenuItem, AspectRatio } from '@carbon/react';
@@ -19,6 +19,7 @@ import { PageHeaderContext, usePageHeader } from './context.js';
 import { getHeaderOffset, scrollableAncestor } from './utils.js';
 import { pkg } from '../../../settings.js';
 import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver.js';
+import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffect.js';
 
 /**
  * ----------
@@ -248,7 +249,7 @@ const PageHeaderContent = /*#__PURE__*/React__default.forwardRef(function PageHe
     setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
     return element.offsetHeight < element.scrollHeight;
   };
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     titleRef.current && isEllipsisActive(titleRef.current);
   }, [title]);
   return /*#__PURE__*/React__default.createElement(Section, _extends({
@@ -343,7 +344,7 @@ const PageHeaderContentPageActions = _ref4 => {
 
   // need to set the grid columns width based on the menu button's width
   // to avoid overlapping when resizing
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (menuButtonVisibility && offsetRef.current) {
       const width = offsetRef.current.offsetWidth;
       document.documentElement.style.setProperty('--page-header-title-grid-width', `${width}px`);

package/es/components/ScrollGradient/constants.js

@@ -5,7 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { useState, useCallback, useEffect, useLayoutEffect } from 'react';
+import { useState, useCallback, useEffect } from 'react';
+import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
 const ScrollStates = {
   // No scrolling required because content fits within container.
@@ -38,7 +39,7 @@ const useIsOverflow = ref => {
       }
     };
   });
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const {
       current
     } = ref;

package/es/components/Tearsheet/TearsheetShell.js

@@ -14,7 +14,7 @@ import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
 import { deprecateProp } from '../../global/js/utils/props-helper.js';
-import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Layer, Section } from '@carbon/react';
+import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Section, Layer, Heading } 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';
@@ -270,18 +270,16 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
       }),
       closeModal: onClose,
       iconDescription: effectiveHasCloseIcon ? closeIconDescription : undefined
-    }, /*#__PURE__*/React__default.createElement(Wrap, {
+    }, /*#__PURE__*/React__default.createElement(Section, {
       className: `${bc}__header-content`,
       element: wide ? Layer : undefined
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bc}__header-fields`
     }, /*#__PURE__*/React__default.createElement(Wrap, {
-      element: "h2",
       className: `${bcModalHeader}__label`
-    }, label), /*#__PURE__*/React__default.createElement(Wrap, {
-      element: "h3",
+    }, label), /*#__PURE__*/React__default.createElement(Section, {
       className: cx(`${bcModalHeader}__heading`, `${bc}__heading`)
-    }, title), /*#__PURE__*/React__default.createElement(Wrap, {
+    }, /*#__PURE__*/React__default.createElement(Heading, null, title)), /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bc}__header-description`
     }, description)), /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bc}__header-actions`

package/es/components/Tearsheet/next/StackContext.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2025, 2025
+ *
+ * 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, { ReactNode } from 'react';
+export interface StackContextType {
+    stack: string[];
+    notifyStack: (id: string, open: boolean, container: HTMLDivElement) => void;
+    getScaleFactor: (id: string) => number | null;
+    getBlockSizeChange: (id: string) => string | null;
+    getDepth: (id: string) => number | null;
+}
+interface StepProviderProps {
+    children: ReactNode;
+    stackStepSize?: 'sm' | 'md' | 'lg';
+}
+export declare const StackProvider: React.FC<StepProviderProps>;
+export declare const useStackContext: () => StackContextType;
+export {};

package/es/components/Tearsheet/next/StackContext.js

@@ -0,0 +1,94 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * 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__default, { useContext, createContext, useState, useRef, useCallback } from 'react';
+import { useResizeObserver } from '../../../global/js/hooks/useResizeObserver.js';
+
+const StackContext = /*#__PURE__*/createContext(undefined);
+const StackProvider = _ref => {
+  let {
+    children,
+    stackStepSize = 'lg'
+  } = _ref;
+  const [stack, setStack] = useState([]);
+  const _containerRef = useRef(null);
+  const bufferMap = {
+    sm: 0.5,
+    md: 0.75,
+    lg: 1
+  };
+  const {
+    width
+  } = useResizeObserver(_containerRef);
+
+  // this method will register/ unregister tearsheet ids in a simple array based on open status
+  const notifyStack = useCallback((id, open, container) => {
+    _containerRef.current = container;
+    setStack(prev => {
+      if (open) {
+        // move to top if already exists
+        if (prev.includes(id)) {
+          return [...prev.filter(i => i !== id), id];
+        }
+        return [...prev, id];
+      } else {
+        // remove from stack
+        return prev.filter(i => i !== id);
+      }
+    });
+  }, []);
+
+  // method that calculates spacing factor for the stacked items
+  const getScaleFactor = id => {
+    const depth = getDepth(id);
+    const buffer = bufferMap[stackStepSize];
+    const bufferInPx = remToPx(buffer);
+    const scale = depth > -1 ? (width - bufferInPx * 2 * depth) / width : 1;
+    return scale;
+  };
+  const remToPx = rem => {
+    return rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
+  };
+  const getDepth = useCallback(id => {
+    const index = stack.indexOf(id);
+    if (index === -1) {
+      return -1;
+    }
+    return stack.length - 1 - index; // topmost → 0
+  }, [stack]);
+  const getBlockSizeChange = id => {
+    const depth = getDepth(id);
+    const buffer = bufferMap[stackStepSize]; //to be changed
+    const bufferInPx = remToPx(buffer);
+    return `${bufferInPx * depth}px`;
+  };
+  const context = {
+    stack,
+    notifyStack,
+    getScaleFactor,
+    getBlockSizeChange,
+    getDepth
+  };
+  return /*#__PURE__*/React__default.createElement(StackContext.Provider, {
+    value: context
+  }, children);
+};
+const useStackContext = () => {
+  const context = useContext(StackContext);
+  if (context === undefined) {
+    return {
+      notifyStack: () => {},
+      stack: [],
+      getDepth: () => -1,
+      getScaleFactor: () => 1,
+      getBlockSizeChange: () => null
+    };
+  }
+  return context;
+};
+
+export { StackProvider, useStackContext };

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

@@ -16,13 +16,24 @@ import { TearsheetHeaderActionItemProps, TearsheetHeaderActionsProps } from './T
  * Tearsheet
  * ----------
  */
-export interface TearsheetProps {
+export interface TearsheetProps extends ComposedModalProps {
     children?: React.ReactNode;
     /**
      * Specifies whether the tearsheet is currently open.
      */
     open?: boolean;
+    /**
+     * User can pass any class names to add to the modal wrapper
+     */
     className?: string;
+    /**
+     * User can pass any class names that will added to the modal container, rather than the wrapper
+     */
+    containerClassName?: string;
+    /**
+     * the defines the gap from top of the view port. Defaulted to 3rem
+     */
+    verticalGap?: string;
     /**
      * Default influencer takes 256px, this allow to override eg: 300px , 20rem
      */
@@ -77,7 +88,7 @@ export type TearsheetComponentType = React.ForwardRefExoticComponent<TearsheetPr
     SummaryContent: FC<SummaryContentProps>;
     Body: FC<TearsheetBodyProps>;
     Footer: FC<FooterProps>;
-} & ComposedModalProps;
+};
 export declare const Tearsheet: TearsheetComponentType;
 export interface FooterProps {
     children: ReactNode;

package/es/components/Tearsheet/next/Tearsheet.js

@@ -6,9 +6,9 @@
  */
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { forwardRef, useRef, useState, useLayoutEffect } from 'react';
+import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
 import cx from 'classnames';
-import { usePrefix, unstable_FeatureFlags, ComposedModal, ModalBody, Layer } from '@carbon/react';
+import { usePrefix, unstable_FeatureFlags, ComposedModal, ModalBody } from '@carbon/react';
 import { TearsheetContext, blockClass } from './context.js';
 import TearsheetHeader, { TearsheetNavigationBar, TearsheetScrollButton } from './TearsheetHeader.js';
 import TearsheetHeaderContent from './TearsheetHeaderContent.js';
@@ -16,7 +16,10 @@ import TearsheetBody, { Influencer, MainContent, SummaryContent } from './Tearsh
 import { TearsheetHeaderActions, TearsheetHeaderActionItem } from './TearsheetHeaderActions.js';
 import { breakpoints } from '@carbon/layout';
 import { usePortalTarget } from '../../../global/js/hooks/usePortalTarget.js';
+import { useStackContext } from './StackContext.js';
 import { useMatchMedia } from '../../../global/js/hooks/useMatchMedia.js';
+import { useId } from '../../../global/js/utils/useId.js';
+import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffect.js';
 
 /**
  * ----------
@@ -35,13 +38,15 @@ const Tearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     ariaLabel,
     onClose,
     selectorPrimaryFocus,
-    open,
+    open = false,
     portalTarget,
+    verticalGap,
+    containerClassName,
     ...rest
   } = _ref;
   const carbonPrefix = usePrefix();
   const localRef = useRef(undefined);
-  const bodyRef = useRef(undefined);
+  const bodyRef = useRef(null);
   const modalRef = ref || localRef;
   const smMediaQuery = `(max-width: ${breakpoints.md.width})`;
   const isSm = useMatchMedia(smMediaQuery) || variant === 'narrow';
@@ -53,8 +58,17 @@ const Tearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
   const influencer = arr.find(child => child.type === Influencer);
   const body = arr.find(child => child.type === TearsheetBody);
   const footer = arr.find(child => child.type === Footer);
+  const uniqueId = useRef(useId());
+  const {
+    notifyStack,
+    stack,
+    getDepth,
+    getScaleFactor,
+    getBlockSizeChange
+  } = useStackContext();
+  const [depth, setDepth] = useState(0);
   const renderPortalUse = usePortalTarget(portalTarget);
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     const AILabelWidth = modalRef.current?.querySelector(`.${carbonPrefix}--ai-label`)?.clientWidth ?? 0;
     const headerActionMarginRight = AILabelWidth + 24 + (isSm ? 8 : 0); // 24 is to compeNsate for close button
     document.documentElement.style.setProperty('--tearsheet-header-action-offset', `${headerActionMarginRight}px`);
@@ -64,9 +78,31 @@ const Tearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     if (summaryContentWidth) {
       document.documentElement.style.setProperty('--tearsheet-summary-content-width', `${summaryContentWidth}`);
     }
+    if (verticalGap) {
+      document.documentElement.style.setProperty('--tearsheet-vertical-gap', `${verticalGap}`);
+    }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isSm]);
+  }, [isSm, rest.decorator, influencerWidth, summaryContentWidth, verticalGap]);
+  useIsomorphicEffect(() => {
+    if (bodyRef.current) {
+      notifyStack?.(uniqueId.current, open, bodyRef.current);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  useEffect(() => {
+    if (stack?.length > 0) {
+      const stackDepth = getDepth?.(uniqueId.current),
+        blockSizeChange = getBlockSizeChange?.(uniqueId.current),
+        scaleFactor = getScaleFactor?.(uniqueId.current);
+      setDepth(stackDepth);
+      modalRef.current.style.setProperty('--stack-depth', stackDepth + '');
+      modalRef.current.style.setProperty('--block-size-change', blockSizeChange);
+      modalRef.current.style.setProperty('--scale-factor', scaleFactor + '');
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [stack]);
   return renderPortalUse(/*#__PURE__*/React__default.createElement(TearsheetContext.Provider, {
     value: {
       hasCloseIcon,
@@ -86,11 +122,13 @@ const Tearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     className: cx(blockClass, className, {
       [`${blockClass}--wide`]: variant === 'wide',
       [`${blockClass}--narrow`]: variant === 'narrow',
+      [`${blockClass}--stacked`]: depth > 0,
+      [`${blockClass}--stack-activated`]: stack.length > 1,
       [`${blockClass}--has-ai-label`]: !!rest.decorator && rest.decorator['type']?.displayName === 'AILabel',
       [`${blockClass}--has-decorator`]: !!rest.decorator && rest.decorator['type']?.displayName !== 'AILabel',
       [`${blockClass}--has-close`]: hasCloseIcon
     }),
-    containerClassName: cx(`${blockClass}__container`, {}),
+    containerClassName: cx(`${blockClass}__container`, containerClassName),
     onClose,
     open,
     selectorPrimaryFocus,
@@ -107,9 +145,7 @@ const Footer = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children
   } = _ref2;
-  return /*#__PURE__*/React__default.createElement(Layer, {
-    as: "footer",
-    withBackground: true,
+  return /*#__PURE__*/React__default.createElement("footer", {
     className: `${blockClass}__footer`,
     ref: ref
   }, children);

package/es/components/Tearsheet/next/TearsheetBody.d.ts

@@ -24,6 +24,8 @@ declare const TearsheetBody: React.ForwardRefExoticComponent<TearsheetBodyProps
 export interface MainContentProps {
     children: ReactNode;
     className?: string;
+    /** this can be set take full width without any padding */
+    isFlush?: boolean;
 }
 /**
  * ----------------
@@ -48,6 +50,8 @@ export interface SummaryContentProps {
      * This handler closes the modal, e.g. changing `open` prop.
      */
     onSummaryPanelClose?(): void;
+    /** this can be set take full width without any padding */
+    isFlush?: boolean;
 }
 export declare const SummaryContent: React.ForwardRefExoticComponent<SummaryContentProps & React.RefAttributes<HTMLDivElement>>;
 export interface InfluencerProps {
@@ -62,6 +66,8 @@ export interface InfluencerProps {
      * This handler closes the modal, e.g. changing `open` prop.
      */
     onInfluencerPanelClose?(): void;
+    /** this can be set take full width without any padding */
+    isFlush?: boolean;
 }
 export declare const Influencer: React.ForwardRefExoticComponent<InfluencerProps & React.RefAttributes<HTMLDivElement>>;
 export default TearsheetBody;

package/es/components/Tearsheet/next/TearsheetBody.js

@@ -7,6 +7,7 @@
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useContext, useRef } from 'react';
+import cx from 'classnames';
 import { blockClass, TearsheetContext } from './context.js';
 import { SidePanel } from '../../SidePanel/SidePanel.js';
 import { Layer } from '@carbon/react';
@@ -37,6 +38,7 @@ const MainContent = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     children,
     className,
+    isFlush,
     ...rest
   } = _ref2;
   const localRef = useRef(null);
@@ -67,7 +69,9 @@ const MainContent = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
   return /*#__PURE__*/React__default.createElement(Layer, _extends({
     withBackground: true,
-    className: `${blockClass}__main-content  ${className}`,
+    className: cx(`${blockClass}__main-content`, className, {
+      [`${blockClass}__flush`]: isFlush
+    }),
     ref: mainContentRef
   }, rest), children);
 });
@@ -83,18 +87,22 @@ const SummaryContent = /*#__PURE__*/forwardRef((_ref3, ref) => {
     children,
     className,
     summaryPanelOpen = false,
-    onSummaryPanelClose
+    onSummaryPanelClose,
+    isFlush
   } = _ref3;
   const {
     isSm
   } = useContext(TearsheetContext);
   return !isSm ? /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__summary-content ${className}`,
+    className: cx(`${blockClass}__summary-content`, className, {
+      [`${blockClass}__flush`]: isFlush
+    }),
     ref: ref
   }, /*#__PURE__*/React__default.createElement("aside", null, children)) : /*#__PURE__*/React__default.createElement(SidePanel, {
     size: "sm",
     open: summaryPanelOpen,
-    onRequestClose: onSummaryPanelClose
+    onRequestClose: onSummaryPanelClose,
+    className: className
   }, children);
 });
 const Influencer = /*#__PURE__*/forwardRef((_ref4, ref) => {
@@ -102,19 +110,23 @@ const Influencer = /*#__PURE__*/forwardRef((_ref4, ref) => {
     children,
     className,
     influencerPanelOpen = false,
-    onInfluencerPanelClose
+    onInfluencerPanelClose,
+    isFlush
   } = _ref4;
   const {
     isSm
   } = useContext(TearsheetContext);
   return !isSm ? /*#__PURE__*/React__default.createElement("aside", {
-    className: `${blockClass}__influencer ${className}`,
+    className: cx(`${blockClass}__influencer`, className, {
+      [`${blockClass}__flush`]: isFlush
+    }),
     ref: ref
   }, children) : /*#__PURE__*/React__default.createElement(SidePanel, {
     size: "sm",
     open: influencerPanelOpen,
     onRequestClose: onInfluencerPanelClose,
-    placement: "left"
+    placement: "left",
+    className: className
   }, children);
 });
 

package/es/components/Tearsheet/next/TearsheetHeaderActions.js

@@ -7,9 +7,11 @@
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import { MenuButton, MenuItem } from '@carbon/react';
-import React__default, { useRef, useState, useLayoutEffect } from 'react';
+import React__default, { useRef, useState } from 'react';
 import { blockClass } from './context.js';
 import { createOverflowHandler } from '@carbon/utilities';
+import cx from 'classnames';
+import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffect.js';
 
 /**
  * ----------------
@@ -31,7 +33,7 @@ const TearsheetHeaderActions = _ref => {
 
   // need to set the grid columns width based on the menu button's width
   // to avoid overlapping when resizing
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     if (menuButtonVisibility && offsetRef.current) {
       const width = offsetRef.current.offsetWidth;
       document.documentElement.style.setProperty('--tearsheet-header-title-grid-width', `${width}px`);
@@ -43,7 +45,7 @@ const TearsheetHeaderActions = _ref => {
     }
     return /*#__PURE__*/React__default.isValidElement(child);
   });
-  useLayoutEffect(() => {
+  useIsomorphicEffect(() => {
     //Menu button will be rendered only if they pass the items in TearsheetHeaderActionItem
     if (!containerRef.current || hasOtherChildType.current) {
       return;
@@ -65,7 +67,10 @@ const TearsheetHeaderActions = _ref => {
   }, children, !hasOtherChildType.current && /*#__PURE__*/React__default.createElement("span", {
     "data-offset": true,
     "data-hidden": true,
-    ref: offsetRef
+    ref: offsetRef,
+    className: cx(`${blockClass}__header-actions-menuButton`, {
+      [`${blockClass}__header-actions-menuButton--hidden`]: hiddenItems.length === 0
+    })
   }, /*#__PURE__*/React__default.createElement(MenuButton, _extends({
     size: "sm"
   }, menuButtonProps), hiddenItems.map(item => {

package/es/components/Tearsheet/next/TearsheetHeaderContent.d.ts

@@ -4,21 +4,35 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React from 'react';
-import { CarbonIconType } from '@carbon/react/icons';
+import React, { ReactNode } from 'react';
 export interface TearsheetHeaderContentProps {
     /**
      * Provide the optional content for header section and will be render after header titles and before progress indicator.
      * People can make use of this if they want to have custom header.
      */
     children?: React.ReactNode;
+    /**
+     * The main title of the tearsheet.
+     */
     title: string;
-    label?: string;
-    description?: string;
-    descriptionExpandLabel?: string;
-    descriptionCollapseLabel?: string;
-    titleIcon?: CarbonIconType;
-    titleIconPosition?: 'leading' | 'trailing';
+    /**
+     * A label for the tearsheet, displayed above the title
+     * to maintain context for the tearsheet (e.g. as the title changes from page
+     * to page of a multi-page task).
+     */
+    label?: ReactNode;
+    /**
+     * A description of the flow, displayed in the header area of the tearsheet.
+     */
+    description?: ReactNode;
+    /**
+     * This can be used to render a content just before the title like an icon
+     */
+    titleStart?: ReactNode;
+    /**
+     * This can be used to render a content just after the title like an icon
+     */
+    titleEnd?: ReactNode;
     /**
      * The PageHeaderContent's page actions
      */

package/es/components/Tearsheet/next/TearsheetHeaderContent.js

@@ -5,9 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React__default, { useContext } from 'react';
+import React__default from 'react';
 import cx from 'classnames';
-import { TearsheetContext, blockClass } from './context.js';
+import { blockClass } from './context.js';
 import { TruncatedText } from '../../TruncatedText/TruncatedText.js';
 
 const TearsheetHeaderContent = /*#__PURE__*/React__default.forwardRef((props, ref) => {
@@ -16,48 +16,35 @@ const TearsheetHeaderContent = /*#__PURE__*/React__default.forwardRef((props, re
     label,
     title,
     description,
-    descriptionExpandLabel = 'Read more',
-    descriptionCollapseLabel = 'Read less',
-    titleIcon: Icon,
-    titleIconPosition = 'leading',
     headerActions,
+    titleStart,
+    titleEnd,
     ...rest
   } = props;
-  const {
-    isSm
-  } = useContext(TearsheetContext);
   return /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}__header-content-wrapper`,
     ref: ref
   }, /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}__header-content`
-  }, /*#__PURE__*/React__default.createElement("p", {
+  }, label ? /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}__header-label`
-  }, label), /*#__PURE__*/React__default.createElement("div", {
+  }, label) : null, /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}__content__title-wrapper`
   }, /*#__PURE__*/React__default.createElement("h2", {
-    className: cx(`${blockClass}__header-title`, {
-      [`${blockClass}__leading-icon`]: Icon && titleIconPosition === 'leading'
-    }, {
-      [`${blockClass}__trailing-icon`]: Icon && titleIconPosition === 'trailing'
-    })
-  }, !isSm && Icon && /*#__PURE__*/React__default.createElement(Icon, {
-    size: 32
-  }), /*#__PURE__*/React__default.createElement(TruncatedText, {
+    className: cx(`${blockClass}__header-title`)
+  }, titleStart ? /*#__PURE__*/React__default.createElement("span", {
+    className: `${blockClass}__title-start`
+  }, titleStart) : null, /*#__PURE__*/React__default.createElement(TruncatedText, {
     id: `${blockClass}__header-title__truncatedText`,
     className: `${blockClass}__content__title`,
     align: "bottom",
     autoAlign: true,
     value: title
-  }))), /*#__PURE__*/React__default.createElement("div", {
+  }), titleEnd ? /*#__PURE__*/React__default.createElement("span", {
+    className: `${blockClass}__title-end`
+  }, titleEnd) : null)), /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}__header-description`
-  }, /*#__PURE__*/React__default.createElement(TruncatedText, {
-    id: `${blockClass}__header-description__truncatedText`,
-    expandLabel: descriptionExpandLabel,
-    collapseLabel: descriptionCollapseLabel,
-    value: description,
-    type: "expand"
-  })), children && /*#__PURE__*/React__default.createElement("div", {
+  }, description), children && /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}__header-content--extra`
   }, children)), headerActions && /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}__header-actions`

package/es/components/Tearsheet/next/_story-assets/StepTearsheet.d.ts

@@ -4,7 +4,7 @@
  * 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, { ReactNode } from 'react';
+import React, { ReactNode, RefObject } from 'react';
 import { StepState } from '../../../StepFlow';
 interface Props {
     children?: ReactNode;
@@ -17,6 +17,7 @@ interface Props {
     selectorPrimaryFocus?: string;
     setOpen?: (open: boolean) => void;
     progressIndicator?: 'vertical' | 'horizontal';
+    launcherButtonRef?: RefObject<HTMLButtonElement | null>;
 }
-export declare const TearsheetWithSteps: ({ children, open, setOpen, onClose, influencer, title, hasCloseIcon, closeIconDescription, selectorPrimaryFocus, progressIndicator, ...rest }: Props) => React.JSX.Element;
+export declare const TearsheetWithSteps: ({ children, open, setOpen, onClose, influencer, title, hasCloseIcon, closeIconDescription, selectorPrimaryFocus, progressIndicator, launcherButtonRef, ...rest }: Props) => React.JSX.Element;
 export {};

package/es/components/Tearsheet/next/index.d.ts

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 export { Tearsheet } from './Tearsheet';
+export { StackProvider, useStackContext } from './StackContext';
+export type { StackContextType } from './StackContext';
 export type { TearsheetProps, TearsheetComponentType, FooterProps, } from './Tearsheet';
 export type { MainContentProps, SummaryContentProps, TearsheetBodyProps, InfluencerProps, } from './TearsheetBody';
 export type { TearsheetHeaderProps, TearsheetNavigationBarProps, TearsheetScrollButtonProps, } from './TearsheetHeader';

package/es/components/index.d.ts

@@ -46,7 +46,8 @@ export * as preview__CoachmarkBeacon from './Coachmark/next/Coachmark/CoachmarkB
 export { TruncatedText as preview__TruncatedText, type TruncatedTextProps, } from './TruncatedText';
 export { FeatureFlags as preview__FeatureFlags, useFeatureFlag as preview__useFeatureFlag, useFeatureFlags as preview__useFeatureFlags, } from './FeatureFlags';
 export * as preview__PageHeader from './PageHeader/next';
-export * as preview__Tearsheet from './Tearsheet/next';
+export { Tearsheet as preview__Tearsheet, StackProvider, } from './Tearsheet/next';
+export type { TearsheetProps, TearsheetComponentType, FooterProps, MainContentProps, SummaryContentProps, TearsheetBodyProps, InfluencerProps, TearsheetHeaderProps, TearsheetNavigationBarProps, TearsheetScrollButtonProps, TearsheetHeaderActionItemProps, TearsheetHeaderActionsProps, TearsheetHeaderContentProps, StackContextType, } from './Tearsheet/next';
 export { BigNumber as previewCandidate__BigNumber, type BigNumberProps, } from './BigNumber';
 export { Coachmark as previewCandidate__Coachmark, BEACON_KIND, COACHMARK_OVERLAY_KIND, COACHMARK_ALIGNMENT, useCoachmark, type CoachmarkProps, } from './Coachmark';
 export { CoachmarkBeacon as previewCandidate__CoachmarkBeacon, type CoachmarkBeaconProps, } from './CoachmarkBeacon';