@carbon/ibm-products 2.83.0 → 2.84.0

package/es/components/AddSelect/AddSelectBody.js

@@ -12,6 +12,7 @@ import cx from 'classnames';
 import { Tag } from '@carbon/react';
 import { Tearsheet } from '../Tearsheet/Tearsheet.js';
 import { TearsheetNarrow } from '../Tearsheet/TearsheetNarrow.js';
+import { pkg } from '../../settings.js';
 import '../EmptyStates/EmptyState.js';
 import '../EmptyStates/EmptyStateV2.deprecated.js';
 import '../EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
@@ -30,7 +31,6 @@ import { getFilteredItems, sortItems } from './add-select-utils.js';
 import { useItemSort } from './hooks/useItemSort.js';
 import useParentSelect from './hooks/useParentSelect.js';
 import usePath from './hooks/usePath.js';
-import { pkg } from '../../settings.js';
 
 const blockClass = `${pkg.prefix}--add-select`;
 const componentName = 'AddSelectBody';

package/es/components/Coachmark/next/Coachmark/CoachmarkBeacon/CoachmarkBeacon.js

@@ -31,18 +31,18 @@ const CoachmarkBeacon = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   return /*#__PURE__*/React__default.createElement("div", _extends({
     className: cx(blockClass, `${blockClass}-${kind}`, className)
-  }, getDevtoolsProps(componentName), {
-    role: "tooltip"
-  }, rest, {
+  }, getDevtoolsProps(componentName), rest, {
     ref: ref
   }), /*#__PURE__*/React__default.createElement("button", _extends({
     type: "button"
   }, buttonProps, {
-    className: `${blockClass}__target`
+    className: `${blockClass}__target`,
+    "aria-label": label
   }), /*#__PURE__*/React__default.createElement("svg", {
     className: `${blockClass}__center`,
-    "aria-label": label
-  }, /*#__PURE__*/React__default.createElement("title", null, label), _circle || (_circle = /*#__PURE__*/React__default.createElement("circle", {
+    "aria-hidden": "true",
+    focusable: "false"
+  }, _circle || (_circle = /*#__PURE__*/React__default.createElement("circle", {
     r: 1,
     cx: 38,
     cy: 38

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/CustomizeColumnsTearsheet.js

@@ -9,9 +9,9 @@ import React__default, { useState, useRef, useCallback, useEffect } from 'react'
 import PropTypes from '../../../../../_virtual/index.js';
 import '../../../../Tearsheet/Tearsheet.js';
 import { TearsheetNarrow } from '../../../../Tearsheet/TearsheetNarrow.js';
+import { pkg } from '../../../../../settings.js';
 import Columns from './Columns.js';
 import Actions from './Actions.js';
-import { pkg } from '../../../../../settings.js';
 
 const blockClass = `${pkg.prefix}--datagrid`;
 const CustomizeColumnsTearsheet = _ref => {

package/es/components/PageHeader/PageHeader.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { Tooltip, Tag, Button, usePrefix, FlexGrid, Row, Column, DefinitionTooltip } from '@carbon/react';
+import { Tooltip, Tag, Button, usePrefix, FlexGrid, Row, Column } from '@carbon/react';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { TagSet } from '../TagSet/TagSet.js';
 import { spacing, baseFontSize, breakpoints } from '@carbon/layout';
@@ -19,7 +19,6 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
-import { useOverflowStringHeight } from '../../global/js/hooks/useOverflowString.js';
 import { useNearestScroll } from '../../global/js/hooks/useWindowScroll.js';
 import { useWindowResize } from '../../global/js/hooks/useWindowResize.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
@@ -355,12 +354,6 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
       }
     });
   }, [headerRef, pageHeaderStyles]);
-  const subtitleRef = useRef(null);
-  const isOverflowing = useOverflowStringHeight(subtitleRef);
-  const subtitleContent = /*#__PURE__*/React__default.createElement("span", {
-    ref: subtitleRef,
-    className: `${blockClass}__subtitle-text`
-  }, subtitle);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}--offset-top-measuring-element`,
     ref: offsetTopMeasuringRef
@@ -437,10 +430,9 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef((_ref, ref) => {
     className: `${blockClass}__subtitle-row`
   }, /*#__PURE__*/React__default.createElement(Column, {
     className: `${blockClass}__subtitle`
-  }, isOverflowing ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
-    definition: subtitle,
-    className: `${blockClass}__subtitle-tooltip`
-  }, subtitleContent) : subtitleContent)), children ? /*#__PURE__*/React__default.createElement(Row, {
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: `${blockClass}__subtitle-text`
+  }, subtitle))), children ? /*#__PURE__*/React__default.createElement(Row, {
     className: `${blockClass}__available-row`
   }, /*#__PURE__*/React__default.createElement(Column, {
     className: `${blockClass}__available-column`

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

@@ -57,6 +57,7 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_r
   const [fullyCollapsed, setFullyCollapsed] = useState(false);
   const [titleClipped, setTitleClipped] = useState(false);
   const [contentActionsClipped, setContentActionsClipped] = useState(false);
+  const [breadcrumbActionsClipped, setBreadcrumbActionsClipped] = useState(false);
 
   // Intersection Observer setup, tracks if the PageHeaderContent is visible on page.
   // If it is not visible, we should set fully collapsed to true so that the
@@ -101,6 +102,7 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_r
       entries.forEach(entry => {
         if (entry.target === refs?.contentActions.current) {
           setContentActionsClipped(!entry.isIntersecting);
+          setBreadcrumbActionsClipped(entry.isIntersecting);
         }
       });
     }, {
@@ -140,7 +142,8 @@ const PageHeader = /*#__PURE__*/React__default.forwardRef(function PageHeader(_r
       pageActionsInstance,
       setPageActionsInstance,
       titleClipped,
-      contentActionsClipped
+      contentActionsClipped,
+      breadcrumbActionsClipped
     }
   }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: classNames,
@@ -167,10 +170,11 @@ const PageHeaderBreadcrumbBar = /*#__PURE__*/React__default.forwardRef(function
     pageActionsFlush,
     ...other
   } = _ref2;
+  const context = usePageHeader();
   const {
     pageActionsInstance: globalActions,
     contentActionsClipped
-  } = usePageHeader();
+  } = context;
   const classNames = cx({
     [`${blockClass}__breadcrumb-bar`]: true,
     [`${blockClass}__breadcrumb-bar-border`]: border,
@@ -181,7 +185,12 @@ const PageHeaderBreadcrumbBar = /*#__PURE__*/React__default.forwardRef(function
     [`${blockClass}__breadcrumb__content-actions-with-global-actions`]: !!globalActions,
     [`${blockClass}__breadcrumb__content-actions-with-global-actions--show`]: contentActionsClipped
   });
-  return /*#__PURE__*/React__default.createElement("div", _extends({
+  return /*#__PURE__*/React__default.createElement(PageHeaderContext.Provider, {
+    value: {
+      ...context,
+      isContentActionsInBreadcrumbBar: true
+    }
+  }, /*#__PURE__*/React__default.createElement("div", _extends({
     className: classNames,
     ref: ref
   }, other), /*#__PURE__*/React__default.createElement(Grid, null, /*#__PURE__*/React__default.createElement(Column, {
@@ -198,7 +207,7 @@ const PageHeaderBreadcrumbBar = /*#__PURE__*/React__default.forwardRef(function
     className: `${blockClass}__breadcrumb__actions`
   }, /*#__PURE__*/React__default.createElement("div", {
     className: contentActionsClasses
-  }, contentActions), pageActions)))));
+  }, contentActions), pageActions))))));
 });
 PageHeaderBreadcrumbBar.displayName = 'PageHeaderBreadcrumbBar';
 
@@ -330,12 +339,14 @@ const PageHeaderContentPageActions = _ref4 => {
   } = _ref4;
   const {
     setRefs,
-    contentActionsClipped
+    contentActionsClipped,
+    breadcrumbActionsClipped,
+    isContentActionsInBreadcrumbBar: isInBreadcrumbBar
   } = usePageHeader();
   const classNames = cx(`${blockClass}__content__page-actions`, {
     // Revisit this:
     // May want to only add this class if there are content actions in the breadcrumb bar as well
-    [`${blockClass}__content__page-actions--clipped`]: contentActionsClipped
+    [`${blockClass}__content__page-actions--clipped`]: isInBreadcrumbBar ? breadcrumbActionsClipped : contentActionsClipped
   }, className);
   const containerRef = useRef(null);
   const offsetRef = useRef(null);
@@ -351,12 +362,18 @@ const PageHeaderContentPageActions = _ref4 => {
     }
   }, [menuButtonVisibility]);
   useEffect(() => {
-    setRefs(prev => ({
-      ...prev,
-      contentActions: containerRef
-    }));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+    if (isInBreadcrumbBar) {
+      setRefs(prev => ({
+        ...prev,
+        breadcrumbActions: containerRef
+      }));
+    } else {
+      setRefs(prev => ({
+        ...prev,
+        contentActions: containerRef
+      }));
+    }
+  }, [isInBreadcrumbBar, setRefs]);
   useEffect(() => {
     if (!containerRef.current || !Array.isArray(actions)) {
       return;

package/es/components/PageHeader/next/context.d.ts

@@ -14,6 +14,7 @@ export type PageHeaderRefs = {
     contentRef?: RefObject<HTMLDivElement | null>;
     titleRef?: RefObject<HTMLHeadingElement | null>;
     contentActions?: RefObject<HTMLDivElement | null>;
+    breadcrumbActions?: RefObject<HTMLDivElement | null>;
 };
 type PageHeaderContextType = {
     refs?: PageHeaderRefs;
@@ -23,6 +24,8 @@ type PageHeaderContextType = {
     fullyCollapsed?: boolean;
     titleClipped?: boolean;
     contentActionsClipped?: boolean;
+    breadcrumbActionsClipped?: boolean;
+    isContentActionsInBreadcrumbBar?: boolean;
 };
 export declare const PageHeaderContext: import("react").Context<PageHeaderContextType | undefined>;
 export declare function usePageHeader(): PageHeaderContextType;

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

@@ -39,6 +39,14 @@ const windowExists = typeof window !== `undefined`;
  */
 const scrollable = target => {
   const style = window.getComputedStyle(target);
+  const tagName = target.tagName.toLowerCase();
+
+  // Exclude body/html from hidden check (modals set overflow:hidden on body)
+  if (tagName === 'body' || tagName === 'html') {
+    return /(auto|scroll)/.test(style.overflow);
+  }
+
+  // For other elements, include hidden as it may be intentional scroll container
   return /(auto|scroll|hidden)/.test(style.overflow);
 };
 

package/es/components/SidePanel/SidePanel.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import { ArrowLeft, Close } from '@carbon/react/icons';
 import { Button, Section, IconButton, Layer, Heading } from '@carbon/react';
 import { useFeatureFlag } from '../FeatureFlags/index.js';
-import React__default, { useState, useRef, useEffect, useCallback } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { Resizer } from '@carbon-labs/react-resizer';
 import PropTypes from '../../_virtual/index.js';
@@ -113,11 +113,19 @@ const SidePanel = /*#__PURE__*/React__default.forwardRef((props, ref) => {
 
   // Title animation on scroll related state
   const [labelTextHeight, setLabelTextHeight] = useState(0);
-  const handleEscapeKey = event => {
+  const handleEscapeKey = useCallback(event => {
     if (event.key === 'Escape' && open) {
       onRequestClose?.();
     }
-  };
+  }, [onRequestClose, open]);
+  useEffect(() => {
+    if (open && !slideIn) {
+      window.addEventListener('keydown', handleEscapeKey);
+      return () => {
+        window.removeEventListener('keydown', handleEscapeKey);
+      };
+    }
+  }, [handleEscapeKey, open, slideIn]);
   useEffect(() => {
     if (!enableResizer) {
       return;

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

@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2016, 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, { type ComponentType, type FC, type PropsWithChildren } from 'react';
+import { type PresenceContext } from './usePresenceContext';
+export interface TearsheetPresenceProps {
+    /**
+     * Specify whether the Modal is currently open
+     */
+    open: boolean;
+    /**
+     * Internal property for backwards compatibility. Specify whether the Modal should opt in to presence mode.
+     */
+    _autoEnablePresence?: boolean;
+    /**
+     * Internal property to predefine the presence context's id for exclusivity.
+     */
+    _presenceId?: string;
+}
+export declare const TearsheetPresence: ({ open, _presenceId: presenceId, _autoEnablePresence: autoEnablePresence, children, }: PropsWithChildren<TearsheetPresenceProps>) => React.JSX.Element | null;
+interface ModalPresenceContextProps extends PresenceContext {
+    autoEnablePresence: boolean;
+}
+export declare const TearsheetPresenceContext: React.Context<ModalPresenceContextProps | undefined>;
+/**
+ * Handles occurrences where only a single modal must consume a context.
+ */
+export declare const useExclusiveTearsheetPresenceContext: (id: string) => ModalPresenceContextProps | undefined;
+type WithModalPresenceProps = Pick<TearsheetPresenceProps, 'open'>;
+/**
+ * Higher-order function that wraps a component with ModalPresence
+ */
+export declare const withTearsheetPresence: <TProps extends object>(Component: ComponentType<TProps>) => FC<TProps & WithModalPresenceProps>;
+export {};

package/es/components/Tearsheet/TearsheetPresence.js

@@ -0,0 +1,56 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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, { createContext, useContext, useMemo } from 'react';
+import { usePresenceContext } from './usePresenceContext.js';
+
+const TearsheetPresence = _ref => {
+  let {
+    open,
+    _presenceId: presenceId,
+    _autoEnablePresence: autoEnablePresence = true,
+    children
+  } = _ref;
+  const [isPresent, context] = usePresenceContext(open, presenceId);
+  const contextValue = useMemo(() => ({
+    autoEnablePresence,
+    ...context
+  }), [autoEnablePresence, context]);
+  if (!isPresent) {
+    return null;
+  }
+  return /*#__PURE__*/React__default.createElement(TearsheetPresenceContext.Provider, {
+    value: contextValue
+  }, children);
+};
+const TearsheetPresenceContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * Handles occurrences where only a single modal must consume a context.
+ */
+const useExclusiveTearsheetPresenceContext = id => {
+  const ctx = useContext(TearsheetPresenceContext);
+  return ctx?.isPresenceExclusive(id) ? ctx : undefined;
+};
+/**
+ * Higher-order function that wraps a component with ModalPresence
+ */
+const withTearsheetPresence = Component => {
+  const WithModalPresence = props => {
+    const {
+      open,
+      ...componentProps
+    } = props;
+    return /*#__PURE__*/React__default.createElement(TearsheetPresence, {
+      open: open
+    }, /*#__PURE__*/React__default.createElement(Component, componentProps));
+  };
+  WithModalPresence.displayName = `withModalPresence(${Component.displayName || Component.name || 'Component'})`;
+  return WithModalPresence;
+};
+
+export { TearsheetPresence, TearsheetPresenceContext, useExclusiveTearsheetPresenceContext, withTearsheetPresence };

package/es/components/Tearsheet/TearsheetShell.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef, useState, useEffect } from 'react';
+import React__default, { useContext, useRef, useState, useEffect } from 'react';
 import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
@@ -14,11 +14,14 @@ 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, Section, Layer, Heading } from '@carbon/react';
+import { Button, useFeatureFlag, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Layer, 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 } from '../../global/js/hooks/useFocus.js';
+import { useMergedRefs } from '../../global/js/hooks/useMergedRefs.js';
+import { useId } from '../../global/js/utils/useId.js';
+import { TearsheetPresenceContext, useExclusiveTearsheetPresenceContext, TearsheetPresence } from './TearsheetPresence.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
@@ -72,6 +75,35 @@ const SectionLevel3 = _ref => {
  * See the canvas tab for the component API details.
  * */
 const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
+  let {
+    open,
+    ...props
+  } = _ref2;
+  const id = useId();
+  const enablePresence = useFeatureFlag('enable-presence');
+  const hasPresenceContext = Boolean(useContext(TearsheetPresenceContext));
+  const hasPresenceOptIn = enablePresence || hasPresenceContext;
+  const exclusivePresenceContext = useExclusiveTearsheetPresenceContext(id);
+
+  // if opt in and not exclusive to a presence context, wrap with presence
+  if (hasPresenceOptIn && !exclusivePresenceContext) {
+    return /*#__PURE__*/React__default.createElement(TearsheetPresence, {
+      open: open ?? false,
+      _presenceId: id
+      // do not auto enable styles for opt-in by feature flag
+      ,
+      _autoEnablePresence: hasPresenceContext
+    }, /*#__PURE__*/React__default.createElement(TearsheetShellDialog, _extends({
+      open: true,
+      ref: ref
+    }, props)));
+  }
+  return /*#__PURE__*/React__default.createElement(TearsheetShellDialog, _extends({
+    ref: ref,
+    open: open
+  }, props));
+});
+const TearsheetShellDialog = /*#__PURE__*/React__default.forwardRef((_ref3, ref) => {
   let {
     // The component props, in alphabetical order (for consistency).
     actions,
@@ -91,7 +123,7 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
     label,
     navigation,
     onClose,
-    open,
+    open: externalOpen,
     portalTarget: portalTargetIn,
     selectorPrimaryFocus,
     selectorsFloatingMenus = [],
@@ -102,7 +134,7 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
     launcherButtonRef,
     // Collect any other property values passed in.
     ...rest
-  } = _ref2;
+  } = _ref3;
   const carbonPrefix = usePrefix();
   const bcModalHeader = `${carbonPrefix}--modal-header`;
   const renderPortalUse = usePortalTarget(portalTargetIn);
@@ -113,13 +145,19 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
   const {
     width
   } = useResizeObserver(resizer);
-  const prevOpen = usePreviousValue(open);
   const {
     keyDownListener,
     claimFocus
   } = useFocus(modalRef, selectorPrimaryFocus);
   modalRef.current;
   const wide = size === 'wide';
+  const presenceContext = useContext(TearsheetPresenceContext);
+  const mergedRefs = useMergedRefs([modalRef, presenceContext?.presenceRef]);
+  const enablePresence = useFeatureFlag('enable-presence') || presenceContext?.autoEnablePresence;
+
+  // always mark as open when mounted with presence
+  const open = externalOpen || enablePresence;
+  const prevOpen = usePreviousValue(open);
 
   // Keep track of the stack depth and our position in it (1-based, 0=closed)
   const [depth, setDepth] = useState(0);
@@ -146,13 +184,28 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
       claimFocus();
     }
   }, [open, currentStep, effectiveHasCloseIcon, claimFocus]);
+
+  // Focus launcher button on open change for non presence tearsheet
   useEffect(() => {
-    if (prevOpen && !open && launcherButtonRef?.current) {
+    if (!enablePresence && prevOpen && !open && launcherButtonRef?.current) {
       setTimeout(() => {
         launcherButtonRef?.current?.focus();
       }, 10);
     }
-  }, [open, prevOpen, launcherButtonRef]);
+  }, [enablePresence, open, prevOpen, launcherButtonRef]);
+
+  // Focus launcher button on unmount for presence tearsheet
+  useEffect(() => {
+    const launcherButton = launcherButtonRef?.current;
+    if (!enablePresence || !launcherButton) {
+      return;
+    }
+    return () => {
+      setTimeout(() => {
+        launcherButton.focus();
+      }, 10);
+    };
+  }, [enablePresence, launcherButtonRef]);
   useEffect(() => {
     requestAnimationFrame(() => {
       if (open && depth === position && !modalRef?.current?.contains(document.activeElement)) {
@@ -167,6 +220,8 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
     }
   }, [claimFocus, hasError, modalRef]);
   useEffect(() => {
+    // Other tearsheets should already be notified if this tearsheet is exiting
+    const isPresent = open && !presenceContext?.isExiting;
     const notify = () => stack.all.forEach(handler => {
       handler(Math.min(stack.open.length, maxDepth), stack.open.indexOf(handler) + 1);
     });
@@ -179,7 +234,7 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
     // false to true to open it then append its notification callback to
     // the end of the stack array (as its ID), and call all the callbacks
     // to notify all open tearsheets that the stacking has changed.
-    if (open) {
+    if (isPresent) {
       stack.open.push(handleStackChange);
       notify();
     }
@@ -201,7 +256,7 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
         notify();
       }
     };
-  }, [open, size]);
+  }, [open, presenceContext?.isExiting, size]);
   const areAllSameSizeVariant = () => new Set(stack.sizes).size === 1;
   useIsomorphicEffect(() => {
     const setScaleValues = () => {
@@ -217,8 +272,8 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
       };
     };
     if (modalRef.current) {
-      Object.entries(setScaleValues()).map(_ref3 => {
-        let [key, value] = _ref3;
+      Object.entries(setScaleValues()).map(_ref4 => {
+        let [key, value] = _ref4;
         modalRef.current.style.setProperty(key, String(value));
       });
     }
@@ -245,7 +300,9 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
         [`${bc}--has-slug`]: deprecated_slug,
         [`${bc}--has-ai-label`]: !!decorator && decorator['type']?.displayName === 'AILabel',
         [`${bc}--has-decorator`]: !!decorator && decorator['type']?.displayName !== 'AILabel',
-        [`${bc}--has-close`]: effectiveHasCloseIcon
+        [`${bc}--has-close`]: effectiveHasCloseIcon,
+        ['is-visible']: enablePresence,
+        [`${bc}--tearsheet-enable-presence`]: presenceContext?.autoEnablePresence
       }),
       decorator: decorator || deprecated_slug,
       containerClassName: cx(`${bc}__container`, {
@@ -257,9 +314,10 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
       selectorPrimaryFocus,
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
-      ref: modalRef,
+      ref: mergedRefs,
       selectorsFloatingMenus: [`.${carbonPrefix}--overflow-menu-options`, `.${carbonPrefix}--tooltip`, '.flatpickr-calendar', `.${bc}__container`, `.${carbonPrefix}--menu`, ...selectorsFloatingMenus],
-      size: "sm"
+      size: "sm",
+      "data-tearsheet-exiting": presenceContext?.isExiting || undefined
     }), includeHeader && /*#__PURE__*/React__default.createElement(ModalHeader, {
       className: cx(`${bc}__header`, {
         [`${bc}__header--with-close-icon`]: effectiveHasCloseIcon,
@@ -270,16 +328,17 @@ const TearsheetShell = /*#__PURE__*/React__default.forwardRef((_ref2, ref) => {
       }),
       closeModal: onClose,
       iconDescription: effectiveHasCloseIcon ? closeIconDescription : undefined
-    }, /*#__PURE__*/React__default.createElement(Section, {
+    }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bc}__header-content`,
       element: wide ? Layer : undefined
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bc}__header-fields`
     }, /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bcModalHeader}__label`
-    }, label), /*#__PURE__*/React__default.createElement(Section, {
+    }, label), /*#__PURE__*/React__default.createElement(Wrap, {
+      element: "h3",
       className: cx(`${bcModalHeader}__heading`, `${bc}__heading`)
-    }, /*#__PURE__*/React__default.createElement(Heading, null, title)), /*#__PURE__*/React__default.createElement(Wrap, {
+    }, title), /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bc}__header-description`
     }, description)), /*#__PURE__*/React__default.createElement(Wrap, {
       className: `${bc}__header-actions`

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

@@ -6,5 +6,7 @@
  */
 export { Tearsheet } from './Tearsheet';
 export { TearsheetNarrow } from './TearsheetNarrow';
+export { TearsheetPresence, withTearsheetPresence } from './TearsheetPresence';
 export type { TearsheetProps } from './Tearsheet';
 export type { TearsheetNarrowProps } from './TearsheetNarrow';
+export type { TearsheetPresenceProps } from './TearsheetPresence';

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

@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 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 { type RefObject } from 'react';
+export declare const usePresence: (ref: RefObject<HTMLElement | null>, isOpen: boolean) => {
+    /**
+     * Indicates whether the ref object is supposed to be mounted
+     */
+    isPresent: boolean;
+    /**
+     * Indicates whether the ref object is currently exiting
+     */
+    isExiting: boolean;
+};

package/es/components/Tearsheet/usePresence.js

@@ -0,0 +1,69 @@
+/**
+ * Copyright IBM Corp. 2020, 2026
+ *
+ * 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 { useState, useCallback, useLayoutEffect } from 'react';
+import { pkg } from '../../settings.js';
+
+const usePresence = (ref, isOpen) => {
+  const [exitState, setExitState] = useState(isOpen ? 'idle' : 'finished');
+  const isExiting = exitState === 'active';
+
+  // element is exiting
+  if (!isOpen && exitState === 'idle') {
+    setExitState('active');
+  }
+
+  // element exit was interrupted
+  if (isOpen && exitState !== 'idle') {
+    setExitState('idle');
+  }
+  const handleAnimationEnd = useCallback(() => {
+    setExitState('finished');
+  }, []);
+  useLayoutEffect(() => {
+    if (!ref.current || !isExiting) {
+      return;
+    }
+
+    // resolve for JSDOM
+    if (!('getAnimations' in ref.current)) {
+      handleAnimationEnd();
+      return;
+    }
+
+    // cover all animations that start with the presence prefix
+    const animations = ref.current.getAnimations({
+      subtree: true
+    }).filter(animation => animation instanceof CSSAnimation && animation.animationName.startsWith(`${pkg.prefix}`));
+    if (!animations.length) {
+      handleAnimationEnd();
+      return;
+    }
+    let cancelled = false;
+    Promise.all(animations.map(animation => animation.finished)).finally(() => {
+      if (cancelled) {
+        return;
+      }
+      handleAnimationEnd();
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [ref, isExiting, handleAnimationEnd]);
+  return {
+    /**
+     * Indicates whether the ref object is supposed to be mounted
+     */
+    isPresent: isOpen || exitState !== 'finished',
+    /**
+     * Indicates whether the ref object is currently exiting
+     */
+    isExiting
+  };
+};
+
+export { usePresence };