@carbon/ibm-products 2.85.0 → 2.86.0

package/es/node_modules/@floating-ui/dom/dist/floating-ui.dom.js

@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { offset as offset$1, flip as flip$1, shift as shift$1, arrow as arrow$1, computePosition as computePosition$1 } from '../../core/dist/floating-ui.core.js';
-import { createCoords, rectToClientRect, floor, max, round, min } from '../../utils/dist/floating-ui.utils.js';
+import { offset as offset$1, flip as flip$1, shift as shift$1, computePosition as computePosition$1, arrow as arrow$1 } from '../../core/dist/floating-ui.core.js';
+import { createCoords, rectToClientRect, floor, round, max, min } from '../../utils/dist/floating-ui.utils.js';
 import { getOverflowAncestors, isElement, getDocumentElement, getWindow, getFrameElement, getComputedStyle, isHTMLElement, isWebKit, isTopLayer, getParentNode, isLastTraversableNode, isTableElement, isContainingBlock, getContainingBlock, getNodeName, isOverflowElement, getNodeScroll } from '../../utils/dist/floating-ui.utils.dom.js';
 
 function getCssDimensions(element) {

package/lib/components/ActionSet/ActionSet.d.ts

@@ -27,6 +27,12 @@ export interface ActionSetProps {
      * An optional class or classes to be added to the outermost element.
      */
     className?: string;
+    /**
+     * When true, prevents automatic stacking of buttons even when size would
+     * normally trigger stacking (e.g., 'sm' size or 'md' with 3+ actions).
+     * Buttons will remain in a horizontal layout.
+     */
+    disableStacking?: boolean;
     /**
      * The size of the action set. Different button arrangements are used at
      * different sizes, to make best use of the available space.

package/lib/components/ActionSet/ActionSet.js

@@ -46,7 +46,7 @@ ActionSetButton.displayName = 'ActionSetButton';
 ActionSetButton.propTypes = {
   /**@ts-ignore*/
   ...react.Button.PropTypes,
-  kind: index.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
+  kind: index.default.oneOf(['ghost', 'danger--ghost', 'tertiary', 'secondary', 'danger', 'primary']),
   label: index.default.string,
   loading: index.default.bool
 };
@@ -68,6 +68,7 @@ const validateActionSetProps = _ref2 => {
     const countActions = kind => actions.filter(action => (action.kind || defaultKind) === kind).length;
     const primaryActions = countActions('primary');
     const secondaryActions = countActions('secondary');
+    const tertiaryActions = countActions('tertiary');
     const dangerActions = countActions('danger');
     const ghostActions = countActions('ghost') + countActions('danger--ghost');
     if (stacking && actions.length > 3) {
@@ -85,8 +86,8 @@ const validateActionSetProps = _ref2 => {
     if (stacking && actions.length > 1 && ghostActions > 0) {
       problems.push(`you cannot have a 'ghost' button in conjunction with other action types in this size of ${componentName}`);
     }
-    if (actions.length > primaryActions + secondaryActions + dangerActions + ghostActions) {
-      problems.push(`you can only have 'primary', 'danger', 'secondary', 'ghost' and 'danger--ghost' buttons in a ${componentName}`);
+    if (actions.length > primaryActions + secondaryActions + tertiaryActions + dangerActions + ghostActions) {
+      problems.push(`you can only have 'primary', 'danger', 'secondary', 'tertiary', 'ghost' and 'danger--ghost' buttons in a ${componentName}`);
     }
     return problems.length > 0 ? pconsole.default.error(`Invalid prop \`actions\` supplied to \`${componentName}\`: ${problems.join(', and ')}.`) : null;
   }
@@ -109,6 +110,7 @@ const ActionSet = /*#__PURE__*/React.forwardRef((props, ref) => {
     actions,
     buttonSize,
     className,
+    disableStacking = false,
     size = defaults.size,
     ...rest
   } = props;
@@ -119,16 +121,18 @@ const ActionSet = /*#__PURE__*/React.forwardRef((props, ref) => {
   const buttons = actions && actions.slice?.(0) || [];
 
   // We stack the buttons in a sm set, or if there are three or more in a md set.
-  const stacking = willStack(size, buttons.length);
+  // Unless disableStacking is true, in which case we never stack.
+  const stacking = disableStacking ? false : willStack(size, buttons.length);
 
-  // Order of button kinds: ghost first, then danger--ghost, then most other types,
-  // then danger, and finally primary
+  // Order of button kinds: ghost first, then danger--ghost, then tertiary,
+  // then most other types, then danger, and finally primary
   const buttonOrder = kind => ({
     ghost: 1,
     'danger--ghost': 2,
-    danger: 4,
-    primary: 5
-  })[kind] ?? 3;
+    tertiary: 3,
+    danger: 5,
+    primary: 6
+  })[kind] ?? 4;
 
   // order the actions with ghost/ghost-danger buttons first and primary/danger buttons last
   // (or the opposite way if we're stacking)
@@ -185,7 +189,7 @@ ActionSet.propTypes = {
   actions: propsHelper.allPropTypes([index.default.arrayOf(index.default.shape({
     /**@ts-ignore*/
     ...react.Button.propTypes,
-    kind: index.default.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
+    kind: index.default.oneOf(['ghost', 'danger--ghost', 'tertiary', 'secondary', 'danger', 'primary']),
     label: index.default.string,
     loading: index.default.bool,
     // we duplicate this Button prop to improve the DocGen here
@@ -204,6 +208,12 @@ ActionSet.propTypes = {
    * An optional class or classes to be added to the outermost element.
    */
   className: index.default.string,
+  /**
+   * When true, prevents automatic stacking of buttons even when size would
+   * normally trigger stacking (e.g., 'sm' size or 'md' with 3+ actions).
+   * Buttons will remain in a horizontal layout.
+   */
+  disableStacking: index.default.bool,
   /**
    * The size of the action set. Different button arrangements are used at
    * different sizes, to make best use of the available space.

package/lib/components/Coachmark/next/Coachmark/ContentBody.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var React = require('react');
 var index = require('../../../../_virtual/index.js');
 var cx = require('classnames');
@@ -39,4 +37,3 @@ ContentBody.propTypes = {
 };
 
 exports.ContentBody = ContentBody;
-exports.default = ContentBody;

package/lib/components/DataSpreadsheet/utils/moveColumnIndicatorLine.js

@@ -40,7 +40,7 @@ const moveColumnIndicatorLine = _ref => {
 
   // Is near left side of viewport
   if (clientX < leftEdgeThreshold) {
-    window.scrollBy(-10, 0);
+    window.scrollBy(-scrollSpeed, 0);
   }
 
   // Is near right side of viewport
@@ -50,7 +50,7 @@ const moveColumnIndicatorLine = _ref => {
 
   // Is near left edge of table
   if (clientX > left && clientX < left + leftEdgeThreshold) {
-    listContainer.scrollBy(-10, 0);
+    listContainer.scrollBy(-scrollSpeed, 0);
   }
 
   // Is near right edge of table

package/lib/components/EditInPlace/EditInPlace.d.ts

@@ -5,7 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { PropsWithChildren } from 'react';
-import PropTypes from 'prop-types';
 type Size = 'sm' | 'md' | 'lg';
 type AlignPropType = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
 type Shape = {
@@ -69,11 +68,11 @@ export interface EditInplaceProps extends PropsWithChildren {
     /**
      * determines if the input is in readOnly mode
      */
-    readOnly: PropTypes.bool;
+    readOnly?: boolean;
     /**
      * label for the edit off button that displays when in read only mode
      */
-    readOnlyLabel?: PropTypes.string;
+    readOnlyLabel?: string;
     /**
      * text for the toggletip that displays when in read only mode
      */

package/lib/components/OptionsTile/OptionsTile.js

@@ -142,7 +142,19 @@ const OptionsTile = /*#__PURE__*/React.forwardRef((props, ref) => {
       setOpen(false);
     }
   };
-  const toggle = evt => {
+  const handleSummaryClick = evt => {
+    // Check if the click originated from the toggle button
+    const target = evt.target;
+    const toggleContainer = target.closest(`.${blockClass}__toggle-container`);
+
+    // If click is on toggle button, don't handle expand/collapse
+    if (toggleContainer) {
+      evt.preventDefault();
+      evt.stopPropagation();
+      return;
+    }
+
+    // Prevent default details toggle behavior
     evt.preventDefault();
     if (open) {
       collapse();
@@ -195,8 +207,25 @@ const OptionsTile = /*#__PURE__*/React.forwardRef((props, ref) => {
       [`${blockClass}--closing`]: closing
     }),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), enabled !== undefined && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__toggle-container`
+  }, devtools.getDevtoolsProps(componentName)), isExpandable ? /*#__PURE__*/React.createElement("details", {
+    className: `${blockClass}__details`,
+    open: open,
+    ref: detailsRef
+  }, /*#__PURE__*/React.createElement("summary", {
+    className: cx(`${blockClass}__header`, {
+      [`${blockClass}__header--has-toggle`]: enabled !== undefined
+    }),
+    onClick: handleSummaryClick,
+    "data-testid": "options-tile-header"
+  }, enabled !== undefined &&
+  /*#__PURE__*/
+  // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+  React.createElement("div", {
+    className: `${blockClass}__toggle-container`,
+    "data-testid": "options-tile-toggle-container",
+    onMouseDown: evt => {
+      evt.preventDefault();
+    }
   }, /*#__PURE__*/React.createElement(react.Toggle, {
     id: `${titleId}-toggle`,
     className: `${blockClass}__toggle`,
@@ -206,14 +235,7 @@ const OptionsTile = /*#__PURE__*/React.forwardRef((props, ref) => {
     onToggle: onToggle,
     size: "sm",
     disabled: isLocked
-  })), isExpandable ? /*#__PURE__*/React.createElement("details", {
-    className: `${blockClass}__details`,
-    open: open,
-    ref: detailsRef
-  }, /*#__PURE__*/React.createElement("summary", {
-    className: `${blockClass}__header`,
-    onClick: toggle
-  }, /*#__PURE__*/React.createElement(icons.ChevronDown, {
+  })), /*#__PURE__*/React.createElement(icons.ChevronDown, {
     size: 16,
     className: cx(`${blockClass}__chevron`, {
       [`${blockClass}__chevron--open`]: open,
@@ -221,7 +243,8 @@ const OptionsTile = /*#__PURE__*/React.forwardRef((props, ref) => {
     })
   }), renderTitle()), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__content`,
-    ref: contentRef
+    ref: contentRef,
+    "data-testid": "options-tile-content"
   }, /*#__PURE__*/React.createElement(react.Layer, null, isLocked && /*#__PURE__*/React.createElement("p", {
     className: `${blockClass}__locked-text`
   }, _Locked || (_Locked = /*#__PURE__*/React.createElement(icons.Locked, {

package/lib/components/PageHeader/next/index.js

@@ -9,15 +9,15 @@
 
 var PageHeader = require('./PageHeader.js');
 var PageHeaderBreadcrumbBar = require('./PageHeaderBreadcrumbBar.js');
+var PageHeaderBreadcrumbOverflow = require('./PageHeaderBreadcrumbOverflow.js');
 var PageHeaderContent = require('./PageHeaderContent.js');
 var PageHeaderContentPageActions = require('./PageHeaderContentPageActions.js');
 var PageHeaderContentText = require('./PageHeaderContentText.js');
-var PageHeaderTabBar = require('./PageHeaderTabBar.js');
 var PageHeaderHeroImage = require('./PageHeaderHeroImage.js');
 var PageHeaderScrollButton = require('./PageHeaderScrollButton.js');
-var PageHeaderTitleBreadcrumb = require('./PageHeaderTitleBreadcrumb.js');
-var PageHeaderBreadcrumbOverflow = require('./PageHeaderBreadcrumbOverflow.js');
+var PageHeaderTabBar = require('./PageHeaderTabBar.js');
 var PageHeaderTagOverflow = require('./PageHeaderTagOverflow.js');
+var PageHeaderTitleBreadcrumb = require('./PageHeaderTitleBreadcrumb.js');
 
 
 
@@ -34,12 +34,12 @@ exports.TabBar = PageHeader.TabBar;
 exports.TagOverflow = PageHeader.TagOverflow;
 exports.TitleBreadcrumb = PageHeader.TitleBreadcrumb;
 exports.PageHeaderBreadcrumbBar = PageHeaderBreadcrumbBar.PageHeaderBreadcrumbBar;
+exports.PageHeaderBreadcrumbOverflow = PageHeaderBreadcrumbOverflow.PageHeaderBreadcrumbOverflow;
 exports.PageHeaderContent = PageHeaderContent.PageHeaderContent;
 exports.PageHeaderContentPageActions = PageHeaderContentPageActions.PageHeaderContentPageActions;
 exports.PageHeaderContentText = PageHeaderContentText.PageHeaderContentText;
-exports.PageHeaderTabBar = PageHeaderTabBar.PageHeaderTabBar;
 exports.PageHeaderHeroImage = PageHeaderHeroImage.PageHeaderHeroImage;
 exports.PageHeaderScrollButton = PageHeaderScrollButton.PageHeaderScrollButton;
-exports.PageHeaderTitleBreadcrumb = PageHeaderTitleBreadcrumb.PageHeaderTitleBreadcrumb;
-exports.PageHeaderBreadcrumbOverflow = PageHeaderBreadcrumbOverflow.PageHeaderBreadcrumbOverflow;
+exports.PageHeaderTabBar = PageHeaderTabBar.PageHeaderTabBar;
 exports.PageHeaderTagOverflow = PageHeaderTagOverflow.PageHeaderTagOverflow;
+exports.PageHeaderTitleBreadcrumb = PageHeaderTitleBreadcrumb.PageHeaderTitleBreadcrumb;

package/lib/components/TagSet/TagSet.js

@@ -7,8 +7,6 @@
 
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var index = require('../../_virtual/index.js');
@@ -357,4 +355,3 @@ TagSet.propTypes = {
 TagSet.displayName = componentName;
 
 exports.TagSet = TagSet;
-exports.default = TagSet;

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

@@ -7,7 +7,7 @@
 import React, { ReactNode } from 'react';
 export interface StackContextType {
     stack: string[];
-    notifyStack: (id: string, open: boolean, container: HTMLDivElement) => void;
+    notifyStack: (id: string, open: boolean, container: HTMLDivElement | null) => void;
     getScaleFactor: (id: string) => number | null;
     getBlockSizeChange: (id: string) => string | null;
     getDepth: (id: string) => number | null;

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

@@ -11,6 +11,7 @@ import { TearsheetHeaderProps, TearsheetNavigationBarProps, TearsheetScrollButto
 import { TearsheetHeaderContentProps } from './TearsheetHeaderContent';
 import { InfluencerProps, MainContentProps, SummaryContentProps, TearsheetBodyProps } from './TearsheetBody';
 import { TearsheetHeaderActionItemProps, TearsheetHeaderActionsProps } from './TearsheetHeaderActions';
+import { TearsheetFooterProps } from './TearsheetFooter';
 /**
  * ----------
  * Tearsheet
@@ -75,6 +76,19 @@ export interface TearsheetProps extends ComposedModalProps {
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: HTMLElement;
+    /**
+     * Disable the portal behavior and render the tearsheet in the existing DOM structure.
+     * This is useful for testing, when you need to inherit React context from parent components,
+     * or when you don't need the z-index isolation that portals provide.
+     * @default false
+     */
+    disablePortal?: boolean;
+    /**
+     * If true, the tearsheet will remain mounted in the DOM when closed, using CSS to hide it.
+     * By default (false), the tearsheet unmounts from the DOM after the exit animation completes.
+     * Set to true if you need to preserve component state or avoid remounting overhead.
+     */
+    keepMounted?: boolean;
 }
 export type TearsheetComponentType = React.ForwardRefExoticComponent<TearsheetProps & React.RefAttributes<HTMLDivElement>> & {
     Header: FC<TearsheetHeaderProps>;
@@ -87,10 +101,10 @@ export type TearsheetComponentType = React.ForwardRefExoticComponent<TearsheetPr
     MainContent: FC<MainContentProps>;
     SummaryContent: FC<SummaryContentProps>;
     Body: FC<TearsheetBodyProps>;
-    Footer: FC<FooterProps>;
+    Footer: FC<TearsheetFooterProps>;
 };
+/**
+ * Wrapper component that handles presence logic and conditionally renders TearsheetInternal.
+ * This ensures that all component state and effects are only initialized when the tearsheet is present.
+ */
 export declare const Tearsheet: TearsheetComponentType;
-export interface FooterProps {
-    children: ReactNode;
-    className?: string;
-}

package/lib/components/Tearsheet/next/Tearsheet.js

@@ -9,6 +9,7 @@
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var ReactDOM = require('react-dom');
 var cx = require('classnames');
 var react = require('@carbon/react');
 var context = require('./context.js');
@@ -16,11 +17,13 @@ var TearsheetHeader = require('./TearsheetHeader.js');
 var TearsheetHeaderContent = require('./TearsheetHeaderContent.js');
 var TearsheetBody = require('./TearsheetBody.js');
 var TearsheetHeaderActions = require('./TearsheetHeaderActions.js');
+var TearsheetFooter = require('./TearsheetFooter.js');
 var layout = require('@carbon/layout');
-var usePortalTarget = require('../../../global/js/hooks/usePortalTarget.js');
 var StackContext = require('./StackContext.js');
 var useMatchMedia = require('../../../global/js/hooks/useMatchMedia.js');
 var useId = require('../../../global/js/utils/useId.js');
+var usePresence = require('../usePresence.js');
+var useMergedRefs = require('../../../global/js/hooks/useMergedRefs.js');
 var useIsomorphicEffect = require('../../../global/js/hooks/useIsomorphicEffect.js');
 
 /**
@@ -29,7 +32,11 @@ var useIsomorphicEffect = require('../../../global/js/hooks/useIsomorphicEffect.
  * ----------
  */
 
-const Tearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+/**
+ * Internal component that handles the actual tearsheet rendering.
+ * This component is always "present" when mounted - the wrapper handles presence logic.
+ */
+const TearsheetInternal = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   let {
     children,
     variant = 'wide',
@@ -42,14 +49,18 @@ const Tearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     selectorPrimaryFocus,
     open = false,
     portalTarget,
+    disablePortal = false,
     verticalGap,
     containerClassName,
+    keepMounted = false,
+    isExiting = false,
+    presenceRef,
     ...rest
   } = _ref;
   const carbonPrefix = react.usePrefix();
-  const localRef = React.useRef(undefined);
+  const localRef = React.useRef(null);
   const bodyRef = React.useRef(null);
-  const modalRef = ref || localRef;
+  const mergedRefs = useMergedRefs.useMergedRefs([ref, localRef, presenceRef]);
   const smMediaQuery = `(max-width: ${layout.breakpoints.md.width})`;
   const isSm = useMatchMedia.useMatchMedia(smMediaQuery) || variant === 'narrow';
   const [hasCloseIcon, setHasCloseIcon] = React.useState(true);
@@ -59,7 +70,7 @@ const Tearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   const header = arr.find(child => child.type === TearsheetHeader.default);
   const influencer = arr.find(child => child.type === TearsheetBody.Influencer);
   const body = arr.find(child => child.type === TearsheetBody.default);
-  const footer = arr.find(child => child.type === Footer);
+  const footer = arr.find(child => child.type === TearsheetFooter.default);
   const uniqueId = React.useRef(useId.useId());
   const {
     notifyStack,
@@ -69,10 +80,17 @@ const Tearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     getBlockSizeChange
   } = StackContext.useStackContext();
   const [depth, setDepth] = React.useState(0);
-  const renderPortalUse = usePortalTarget.usePortalTarget(portalTarget);
+  const [mountNode, setMountNode] = React.useState(null);
+
+  // Set portal mount node using useIsomorphicEffect to avoid SSR issues and double rendering
+  useIsomorphicEffect.useIsomorphicEffect(() => {
+    if (!disablePortal) {
+      setMountNode(portalTarget || document.body);
+    }
+  }, [portalTarget, disablePortal]);
   useIsomorphicEffect.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
+    const AILabelWidth = localRef.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`);
     if (influencerWidth) {
       document.documentElement.style.setProperty('--tearsheet-influencer-width', `${influencerWidth}`);
@@ -87,25 +105,30 @@ const Tearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSm, rest.decorator, influencerWidth, summaryContentWidth, verticalGap]);
   useIsomorphicEffect.useIsomorphicEffect(() => {
-    if (bodyRef.current) {
-      notifyStack?.(uniqueId.current, open, bodyRef.current);
+    const id = uniqueId.current;
+    if (localRef.current && open) {
+      notifyStack?.(id, true, localRef.current);
     }
 
+    // Cleanup when component unmounts
+    return () => {
+      notifyStack?.(id, false, null);
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open]);
+  }, [localRef.current, open]);
   React.useEffect(() => {
-    if (stack?.length > 0) {
+    if (stack?.length > 0 && localRef.current) {
       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 + '');
+      localRef.current.style.setProperty('--stack-depth', stackDepth + '');
+      localRef.current.style.setProperty('--block-size-change', blockSizeChange);
+      localRef.current.style.setProperty('--scale-factor', scaleFactor + '');
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [stack]);
-  return renderPortalUse(/*#__PURE__*/React.createElement(context.TearsheetContext.Provider, {
+  const content = /*#__PURE__*/React.createElement(context.TearsheetContext.Provider, {
     value: {
       hasCloseIcon,
       setHasCloseIcon,
@@ -128,29 +151,65 @@ const Tearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [`${context.blockClass}--stack-activated`]: stack.length > 1,
       [`${context.blockClass}--has-ai-label`]: !!rest.decorator && rest.decorator['type']?.displayName === 'AILabel',
       [`${context.blockClass}--has-decorator`]: !!rest.decorator && rest.decorator['type']?.displayName !== 'AILabel',
-      [`${context.blockClass}--has-close`]: hasCloseIcon
+      [`${context.blockClass}--has-close`]: hasCloseIcon,
+      ['is-visible']: keepMounted ? open : true,
+      // When keepMounted, use open prop; otherwise always visible
+      [`${context.blockClass}--keep-mounted`]: keepMounted
     }),
     containerClassName: cx(`${context.blockClass}__container`, containerClassName),
     onClose,
-    open,
+    open: keepMounted ? open : true,
+    // When keepMounted, use actual open; otherwise always open
     selectorPrimaryFocus,
-    ref: modalRef,
+    ref: mergedRefs,
     selectorsFloatingMenus: [`.${carbonPrefix}--overflow-menu-options`, `.${carbonPrefix}--tooltip`, '.flatpickr-calendar', `.${context.blockClass}__container`, `.${carbonPrefix}--menu`, ...selectorsFloatingMenus],
     isFullWidth: true,
-    size: variant === 'narrow' ? 'sm' : ''
+    size: variant === 'narrow' ? 'sm' : '',
+    "data-tearsheet-exiting": isExiting ? true : undefined
   }), header, /*#__PURE__*/React.createElement(react.ModalBody, {
-    className: `${context.blockClass}__body-layout`,
+    className: cx(`${context.blockClass}__body-layout`, {
+      [`${context.blockClass}__body-layout--has-influencer`]: influencer && !isSm
+    }),
     ref: bodyRef
-  }, influencer, body, footer)))));
+  }, influencer, body, footer))));
+
+  // If portal is disabled, return content directly
+  if (disablePortal) {
+    return content;
+  }
+
+  // Return portal if mountNode is set, otherwise return content directly (SSR-safe)
+  return mountNode ? /*#__PURE__*/ReactDOM.createPortal(content, mountNode) : content;
 });
-const Footer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children
-  } = _ref2;
-  return /*#__PURE__*/React.createElement("footer", {
-    className: `${context.blockClass}__footer`,
-    ref: ref
-  }, children);
+
+/**
+ * Wrapper component that handles presence logic and conditionally renders TearsheetInternal.
+ * This ensures that all component state and effects are only initialized when the tearsheet is present.
+ */
+const Tearsheet = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    open = false,
+    keepMounted = false
+  } = props;
+  const presenceRef = React.useRef(null);
+
+  // Use presence hook for enter/exit animations (unless keepMounted is true)
+  const {
+    isPresent,
+    isExiting
+  } = usePresence.usePresence(presenceRef, keepMounted ? true : open);
+
+  // Don't render if not present (after exit animation completes) - unless keepMounted is true
+  if (!keepMounted && !isPresent) {
+    return null;
+  }
+
+  // When present, render the internal component with all props
+  return /*#__PURE__*/React.createElement(TearsheetInternal, _rollupPluginBabelHelpers.extends({}, props, {
+    ref: ref,
+    presenceRef: presenceRef,
+    isExiting: isExiting
+  }));
 });
 Tearsheet.Header = TearsheetHeader.default;
 Tearsheet.HeaderContent = TearsheetHeaderContent.default;
@@ -158,7 +217,7 @@ Tearsheet.Body = TearsheetBody.default;
 Tearsheet.Influencer = TearsheetBody.Influencer;
 Tearsheet.MainContent = TearsheetBody.MainContent;
 Tearsheet.SummaryContent = TearsheetBody.SummaryContent;
-Tearsheet.Footer = Footer;
+Tearsheet.Footer = TearsheetFooter.default;
 Tearsheet.NavigationBar = TearsheetHeader.TearsheetNavigationBar;
 Tearsheet.ScrollButton = TearsheetHeader.TearsheetScrollButton;
 Tearsheet.HeaderActions = TearsheetHeaderActions.TearsheetHeaderActions;

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

@@ -106,7 +106,7 @@ const SummaryContent = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     size: "sm",
     open: summaryPanelOpen,
     onRequestClose: onSummaryPanelClose,
-    className: className
+    className: cx(`${context.blockClass}__side-panel`, className)
   }, children);
 });
 const Influencer = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
@@ -130,7 +130,7 @@ const Influencer = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     open: influencerPanelOpen,
     onRequestClose: onInfluencerPanelClose,
     placement: "left",
-    className: className
+    className: cx(`${context.blockClass}__side-panel`, className)
   }, children);
 });
 

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

@@ -0,0 +1,31 @@
+/**
+ * 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';
+import { ButtonProps } from '@carbon/react';
+import { ActionSetProps } from '../../ActionSet';
+export interface TearsheetFooterProps {
+    /**
+     * Optional children to render in the footer. If provided, children are rendered first,
+     * followed by the ActionSet (if actions are provided).
+     */
+    children?: ReactNode;
+    /**
+     * Optional class name to add to the footer element.
+     */
+    className?: string;
+    /**
+     * Optional array of action button configurations. If provided, an ActionSet will be
+     * rendered after any children. Each action follows the ActionSet button specification.
+     */
+    actions?: ButtonProps<React.ElementType>[];
+    /**
+     * Optional size for the ActionSet buttons. Defaults to the ActionSet's default size.
+     */
+    buttonSize?: ActionSetProps['buttonSize'];
+}
+declare const TearsheetFooter: React.ForwardRefExoticComponent<TearsheetFooterProps & React.RefAttributes<HTMLDivElement>>;
+export default TearsheetFooter;

package/lib/components/Tearsheet/next/TearsheetFooter.js

@@ -0,0 +1,43 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cx = require('classnames');
+var ActionSet = require('../../ActionSet/ActionSet.js');
+var context = require('./context.js');
+
+const TearsheetFooter = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    children,
+    className,
+    actions,
+    buttonSize
+  } = _ref;
+  const {
+    variant
+  } = React.useContext(context.TearsheetContext);
+  const actionCount = actions?.length || 0;
+  return /*#__PURE__*/React.createElement("footer", {
+    className: cx(`${context.blockClass}__footer`, className, {
+      [`${context.blockClass}__footer--three-actions`]: actionCount == 3,
+      [`${context.blockClass}__footer--many-actions`]: actionCount > 3
+    }),
+    ref: ref
+  }, children, actions && actions.length > 0 && /*#__PURE__*/React.createElement(ActionSet.ActionSet, {
+    actions: actions,
+    buttonSize: buttonSize,
+    disableStacking: true,
+    size: variant == 'wide' ? '2xl' : 'lg'
+  }));
+});
+TearsheetFooter.displayName = 'TearsheetFooter';
+
+exports.default = TearsheetFooter;