@carbon/ibm-products 2.85.0 → 2.86.0

package/es/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/es/components/ActionSet/ActionSet.js

@@ -44,7 +44,7 @@ ActionSetButton.displayName = 'ActionSetButton';
 ActionSetButton.propTypes = {
   /**@ts-ignore*/
   ...Button.PropTypes,
-  kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
+  kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'tertiary', 'secondary', 'danger', 'primary']),
   label: PropTypes.string,
   loading: PropTypes.bool
 };
@@ -66,6 +66,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) {
@@ -83,8 +84,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.error(`Invalid prop \`actions\` supplied to \`${componentName}\`: ${problems.join(', and ')}.`) : null;
   }
@@ -107,6 +108,7 @@ const ActionSet = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     actions,
     buttonSize,
     className,
+    disableStacking = false,
     size = defaults.size,
     ...rest
   } = props;
@@ -117,16 +119,18 @@ const ActionSet = /*#__PURE__*/React__default.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)
@@ -183,7 +187,7 @@ ActionSet.propTypes = {
   actions: allPropTypes([PropTypes.arrayOf(PropTypes.shape({
     /**@ts-ignore*/
     ...Button.propTypes,
-    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'secondary', 'danger', 'primary']),
+    kind: PropTypes.oneOf(['ghost', 'danger--ghost', 'tertiary', 'secondary', 'danger', 'primary']),
     label: PropTypes.string,
     loading: PropTypes.bool,
     // we duplicate this Button prop to improve the DocGen here
@@ -202,6 +206,12 @@ ActionSet.propTypes = {
    * An optional class or classes to be added to the outermost element.
    */
   className: PropTypes.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: PropTypes.bool,
   /**
    * The size of the action set. Different button arrangements are used at
    * different sizes, to make best use of the available space.

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

@@ -34,4 +34,4 @@ ContentBody.propTypes = {
   className: PropTypes.string
 };
 
-export { ContentBody, ContentBody as default };
+export { ContentBody };

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

@@ -38,7 +38,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
@@ -48,7 +48,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/es/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/es/components/OptionsTile/OptionsTile.js

@@ -121,7 +121,19 @@ const OptionsTile = /*#__PURE__*/React__default.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();
@@ -174,8 +186,25 @@ const OptionsTile = /*#__PURE__*/React__default.forwardRef((props, ref) => {
       [`${blockClass}--closing`]: closing
     }),
     ref: ref
-  }, getDevtoolsProps(componentName)), enabled !== undefined && /*#__PURE__*/React__default.createElement("div", {
-    className: `${blockClass}__toggle-container`
+  }, getDevtoolsProps(componentName)), isExpandable ? /*#__PURE__*/React__default.createElement("details", {
+    className: `${blockClass}__details`,
+    open: open,
+    ref: detailsRef
+  }, /*#__PURE__*/React__default.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__default.createElement("div", {
+    className: `${blockClass}__toggle-container`,
+    "data-testid": "options-tile-toggle-container",
+    onMouseDown: evt => {
+      evt.preventDefault();
+    }
   }, /*#__PURE__*/React__default.createElement(Toggle, {
     id: `${titleId}-toggle`,
     className: `${blockClass}__toggle`,
@@ -185,14 +214,7 @@ const OptionsTile = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     onToggle: onToggle,
     size: "sm",
     disabled: isLocked
-  })), isExpandable ? /*#__PURE__*/React__default.createElement("details", {
-    className: `${blockClass}__details`,
-    open: open,
-    ref: detailsRef
-  }, /*#__PURE__*/React__default.createElement("summary", {
-    className: `${blockClass}__header`,
-    onClick: toggle
-  }, /*#__PURE__*/React__default.createElement(ChevronDown, {
+  })), /*#__PURE__*/React__default.createElement(ChevronDown, {
     size: 16,
     className: cx(`${blockClass}__chevron`, {
       [`${blockClass}__chevron--open`]: open,
@@ -200,7 +222,8 @@ const OptionsTile = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     })
   }), renderTitle()), /*#__PURE__*/React__default.createElement("div", {
     className: `${blockClass}__content`,
-    ref: contentRef
+    ref: contentRef,
+    "data-testid": "options-tile-content"
   }, /*#__PURE__*/React__default.createElement(Layer, null, isLocked && /*#__PURE__*/React__default.createElement("p", {
     className: `${blockClass}__locked-text`
   }, _Locked || (_Locked = /*#__PURE__*/React__default.createElement(Locked, {

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { createContext, useContext } from 'react';
+import { useContext, createContext } from 'react';
 
 /**
  * -------------

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

@@ -7,12 +7,12 @@
 
 export { BreadcrumbBar, BreadcrumbOverflow, Content, ContentPageActions, ContentText, HeroImage, PageHeader, Root, ScrollButton, TabBar, TagOverflow, TitleBreadcrumb } from './PageHeader.js';
 export { PageHeaderBreadcrumbBar } from './PageHeaderBreadcrumbBar.js';
+export { PageHeaderBreadcrumbOverflow } from './PageHeaderBreadcrumbOverflow.js';
 export { PageHeaderContent } from './PageHeaderContent.js';
 export { PageHeaderContentPageActions } from './PageHeaderContentPageActions.js';
 export { PageHeaderContentText } from './PageHeaderContentText.js';
-export { PageHeaderTabBar } from './PageHeaderTabBar.js';
 export { PageHeaderHeroImage } from './PageHeaderHeroImage.js';
 export { PageHeaderScrollButton } from './PageHeaderScrollButton.js';
-export { PageHeaderTitleBreadcrumb } from './PageHeaderTitleBreadcrumb.js';
-export { PageHeaderBreadcrumbOverflow } from './PageHeaderBreadcrumbOverflow.js';
+export { PageHeaderTabBar } from './PageHeaderTabBar.js';
 export { PageHeaderTagOverflow } from './PageHeaderTagOverflow.js';
+export { PageHeaderTitleBreadcrumb } from './PageHeaderTitleBreadcrumb.js';

package/es/components/StringFormatter/StringFormatter.js

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { DefinitionTooltip } from '@carbon/react';
-import { StringFormatterAlignment, propMappingFunction, deprecated_StringFormatterAlignment } from './utils/enums.js';
+import { StringFormatterAlignment, deprecated_StringFormatterAlignment, propMappingFunction } from './utils/enums.js';
 import { allPropTypes } from '../../global/js/utils/props-helper.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 

package/es/components/TagSet/TagSet.js

@@ -352,4 +352,4 @@ TagSet.propTypes = {
 };
 TagSet.displayName = componentName;
 
-export { TagSet, TagSet as default };
+export { TagSet };

package/es/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/es/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/es/components/Tearsheet/next/Tearsheet.js

@@ -7,6 +7,7 @@
 
 import { extends as _extends } from '../../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
+import { createPortal } from 'react-dom';
 import cx from 'classnames';
 import { usePrefix, unstable_FeatureFlags, ComposedModal, ModalBody } from '@carbon/react';
 import { TearsheetContext, blockClass } from './context.js';
@@ -14,11 +15,13 @@ import TearsheetHeader, { TearsheetNavigationBar, TearsheetScrollButton } from '
 import TearsheetHeaderContent from './TearsheetHeaderContent.js';
 import TearsheetBody, { Influencer, MainContent, SummaryContent } from './TearsheetBody.js';
 import { TearsheetHeaderActions, TearsheetHeaderActionItem } from './TearsheetHeaderActions.js';
+import TearsheetFooter from './TearsheetFooter.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 { usePresence } from '../usePresence.js';
+import { useMergedRefs } from '../../../global/js/hooks/useMergedRefs.js';
 import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffect.js';
 
 /**
@@ -27,7 +30,11 @@ import { useIsomorphicEffect } from '../../../global/js/hooks/useIsomorphicEffec
  * ----------
  */
 
-const Tearsheet = /*#__PURE__*/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__*/forwardRef((_ref, ref) => {
   let {
     children,
     variant = 'wide',
@@ -40,14 +47,18 @@ const Tearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     selectorPrimaryFocus,
     open = false,
     portalTarget,
+    disablePortal = false,
     verticalGap,
     containerClassName,
+    keepMounted = false,
+    isExiting = false,
+    presenceRef,
     ...rest
   } = _ref;
   const carbonPrefix = usePrefix();
-  const localRef = useRef(undefined);
+  const localRef = useRef(null);
   const bodyRef = useRef(null);
-  const modalRef = ref || localRef;
+  const mergedRefs = useMergedRefs([ref, localRef, presenceRef]);
   const smMediaQuery = `(max-width: ${breakpoints.md.width})`;
   const isSm = useMatchMedia(smMediaQuery) || variant === 'narrow';
   const [hasCloseIcon, setHasCloseIcon] = useState(true);
@@ -57,7 +68,7 @@ const Tearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
   const header = arr.find(child => child.type === TearsheetHeader);
   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 footer = arr.find(child => child.type === TearsheetFooter);
   const uniqueId = useRef(useId());
   const {
     notifyStack,
@@ -67,10 +78,17 @@ const Tearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     getBlockSizeChange
   } = useStackContext();
   const [depth, setDepth] = useState(0);
-  const renderPortalUse = usePortalTarget(portalTarget);
+  const [mountNode, setMountNode] = useState(null);
+
+  // Set portal mount node using useIsomorphicEffect to avoid SSR issues and double rendering
+  useIsomorphicEffect(() => {
+    if (!disablePortal) {
+      setMountNode(portalTarget || document.body);
+    }
+  }, [portalTarget, disablePortal]);
   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}`);
@@ -85,25 +103,30 @@ const Tearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSm, rest.decorator, influencerWidth, summaryContentWidth, verticalGap]);
   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]);
   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__default.createElement(TearsheetContext.Provider, {
+  const content = /*#__PURE__*/React__default.createElement(TearsheetContext.Provider, {
     value: {
       hasCloseIcon,
       setHasCloseIcon,
@@ -126,29 +149,65 @@ const Tearsheet = /*#__PURE__*/forwardRef((_ref, ref) => {
       [`${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
+      [`${blockClass}--has-close`]: hasCloseIcon,
+      ['is-visible']: keepMounted ? open : true,
+      // When keepMounted, use open prop; otherwise always visible
+      [`${blockClass}--keep-mounted`]: keepMounted
     }),
     containerClassName: cx(`${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', `.${blockClass}__container`, `.${carbonPrefix}--menu`, ...selectorsFloatingMenus],
     isFullWidth: true,
-    size: variant === 'narrow' ? 'sm' : ''
+    size: variant === 'narrow' ? 'sm' : '',
+    "data-tearsheet-exiting": isExiting ? true : undefined
   }), header, /*#__PURE__*/React__default.createElement(ModalBody, {
-    className: `${blockClass}__body-layout`,
+    className: cx(`${blockClass}__body-layout`, {
+      [`${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__*/createPortal(content, mountNode) : content;
 });
-const Footer = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-    children
-  } = _ref2;
-  return /*#__PURE__*/React__default.createElement("footer", {
-    className: `${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__*/forwardRef((props, ref) => {
+  const {
+    open = false,
+    keepMounted = false
+  } = props;
+  const presenceRef = useRef(null);
+
+  // Use presence hook for enter/exit animations (unless keepMounted is true)
+  const {
+    isPresent,
+    isExiting
+  } = 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__default.createElement(TearsheetInternal, _extends({}, props, {
+    ref: ref,
+    presenceRef: presenceRef,
+    isExiting: isExiting
+  }));
 });
 Tearsheet.Header = TearsheetHeader;
 Tearsheet.HeaderContent = TearsheetHeaderContent;
@@ -156,7 +215,7 @@ Tearsheet.Body = TearsheetBody;
 Tearsheet.Influencer = Influencer;
 Tearsheet.MainContent = MainContent;
 Tearsheet.SummaryContent = SummaryContent;
-Tearsheet.Footer = Footer;
+Tearsheet.Footer = TearsheetFooter;
 Tearsheet.NavigationBar = TearsheetNavigationBar;
 Tearsheet.ScrollButton = TearsheetScrollButton;
 Tearsheet.HeaderActions = TearsheetHeaderActions;

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

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

package/es/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/es/components/Tearsheet/next/TearsheetFooter.js

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

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

@@ -35,7 +35,7 @@ export interface TearsheetHeaderProps {
     hideCloseButton?: boolean;
     className?: string;
     /**
-     * Default header collapse/expand while scrolling the main content can bd disabled  by setting this
+     * Default header collapse/expand while scrolling the main content can be disabled  by setting this
      */
     disableHeaderCollapse?: boolean;
 }

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

@@ -7,8 +7,9 @@
 export { Tearsheet } from './Tearsheet';
 export { StackProvider, useStackContext } from './StackContext';
 export type { StackContextType } from './StackContext';
-export type { TearsheetProps, TearsheetComponentType, FooterProps, } from './Tearsheet';
+export type { TearsheetProps, TearsheetComponentType } from './Tearsheet';
 export type { MainContentProps, SummaryContentProps, TearsheetBodyProps, InfluencerProps, } from './TearsheetBody';
 export type { TearsheetHeaderProps, TearsheetNavigationBarProps, TearsheetScrollButtonProps, } from './TearsheetHeader';
 export type { TearsheetHeaderActionItemProps, TearsheetHeaderActionsProps, } from './TearsheetHeaderActions';
 export type { TearsheetHeaderContentProps } from './TearsheetHeaderContent';
+export type { TearsheetFooterProps } from './TearsheetFooter';

package/es/components/index.d.ts

@@ -50,7 +50,7 @@ export { TruncatedText as preview__TruncatedText, type TruncatedTextProps, } fro
 export { FeatureFlags as preview__FeatureFlags, useFeatureFlag as preview__useFeatureFlag, useFeatureFlags as preview__useFeatureFlags, } from './FeatureFlags';
 export * as preview__PageHeader from './PageHeader/next';
 export { Tearsheet as preview__Tearsheet, StackProvider, } from './Tearsheet/next';
-export type { TearsheetProps as preview__TearsheetProps, TearsheetComponentType, FooterProps, MainContentProps, SummaryContentProps, TearsheetBodyProps, InfluencerProps, TearsheetHeaderProps, TearsheetNavigationBarProps, TearsheetScrollButtonProps, TearsheetHeaderActionItemProps, TearsheetHeaderActionsProps, TearsheetHeaderContentProps, StackContextType, } from './Tearsheet/next';
+export type { TearsheetProps as preview__TearsheetProps, TearsheetComponentType, TearsheetFooterProps, 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';