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

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterFlyout.js

@@ -93,7 +93,8 @@ const FilterFlyout = _ref => {
   const [shouldDisableButtons, setShouldDisableButtons] = useShouldDisableButtons.default({
     initialValue: true,
     filtersState,
-    prevFiltersRef
+    prevFiltersRef,
+    open
   });
 
   // Skip resize testing

package/lib/components/Datagrid/Datagrid/addons/Filtering/FilterPanel.js

@@ -101,7 +101,8 @@ const FilterPanel = _ref => {
   const [shouldDisableButtons, setShouldDisableButtons] = useShouldDisableButtons.default({
     initialValue: true,
     filtersState,
-    prevFiltersRef
+    prevFiltersRef,
+    open: panelOpen
   });
   const shouldReduceMotion = usePrefersReducedMotion.usePrefersReducedMotion();
   const exitAnimationName = shouldReduceMotion ? 'filter-panel-exit-reduced' : 'filter-panel-exit-left';

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.d.ts

@@ -6,4 +6,4 @@ export default useShouldDisableButtons;
  * @param  {object} prevFiltersRef - reference of the prev filterState
  * @returns {Array} returns a tuple of the state and setter function
  */
-declare function useShouldDisableButtons({ initialValue, filtersState, prevFiltersRef, }: string): any[];
+declare function useShouldDisableButtons({ initialValue, filtersState, prevFiltersRef, open, }: string): any[];

package/lib/components/Datagrid/Datagrid/addons/Filtering/hooks/useShouldDisableButtons.js

@@ -27,10 +27,15 @@ const useShouldDisableButtons = _ref => {
     initialValue,
     // initially the buttons should be disabled
     filtersState,
-    prevFiltersRef
+    prevFiltersRef,
+    open
   } = _ref;
   const [shouldDisableButtons, setShouldDisableButtons] = React.useState(initialValue);
   React.useEffect(function updateDisabledButtonsState() {
+    // prevent this effect from running when columns are being resized
+    if (!open) {
+      return;
+    }
     setShouldDisableButtons(deepCompareObject.deepCompareObject(filtersState, JSON.parse(prevFiltersRef.current)));
   }, [filtersState, prevFiltersRef]);
   return [shouldDisableButtons, setShouldDisableButtons];

package/lib/components/Datagrid/useResizeTable.js

@@ -9,7 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var React = require('react');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 const useResizeTable = hooks => {
   const useInstanceBeforeDimensions = instance => {
@@ -18,7 +18,7 @@ const useResizeTable = hooks => {
       handleResize
     } = instance;
     const parent = rootRef && rootRef.current && rootRef.current.parentElement;
-    React.useLayoutEffect(() => {
+    useIsomorphicEffect.useIsomorphicEffect(() => {
       if (!parent) {
         return () => {};
       }

package/lib/components/Datagrid/useSelectRows.js

@@ -17,6 +17,7 @@ var DatagridSelectAll = require('./Datagrid/DatagridSelectAll.js');
 var commonColumnIds = require('./common-column-ids.js');
 var settings = require('../../settings.js');
 var stateReducer = require('./Datagrid/addons/stateReducer.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 const blockClass = `${settings.pkg.prefix}--datagrid`;
 const checkboxClass = `${settings.pkg.prefix}--datagrid__checkbox-cell`;
@@ -89,7 +90,7 @@ const SelectRow = datagridState => {
     getRowId
   } = datagridState;
   const [windowSize, setWindowSize] = React.useState();
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     setWindowSize(window.innerWidth);
     function updateSize() {
       setWindowSize(window.innerWidth);

package/lib/components/Datagrid/useStickyColumn.js

@@ -13,6 +13,7 @@ var React = require('react');
 var debounce = require('../../global/js/utils/debounce.js');
 var cx = require('classnames');
 var settings = require('../../settings.js');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 const blockClass = `${settings.pkg.prefix}--datagrid`;
 const styleClassPrefix = `${blockClass}__right-sticky-column`;
@@ -25,7 +26,7 @@ const useStickyColumn = hooks => {
   React.useEffect(() => {
     setWindowSize(window?.innerWidth);
   }, []);
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     /* istanbul ignore next */
     function updateSize() {
       setWindowSize(window.innerWidth);

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

@@ -21,6 +21,7 @@ var context = require('./context.js');
 var utils = require('./utils.js');
 var settings = require('../../../settings.js');
 var useResizeObserver = require('../../../global/js/hooks/useResizeObserver.js');
+var useIsomorphicEffect = require('../../../global/js/hooks/useIsomorphicEffect.js');
 
 /**
  * ----------
@@ -250,7 +251,7 @@ const PageHeaderContent = /*#__PURE__*/React.forwardRef(function PageHeaderConte
     setIsEllipsisApplied(element.offsetHeight < element.scrollHeight);
     return element.offsetHeight < element.scrollHeight;
   };
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     titleRef.current && isEllipsisActive(titleRef.current);
   }, [title]);
   return /*#__PURE__*/React.createElement(react.Section, _rollupPluginBabelHelpers.extends({
@@ -345,7 +346,7 @@ const PageHeaderContentPageActions = _ref4 => {
 
   // need to set the grid columns width based on the menu button's width
   // to avoid overlapping when resizing
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     if (menuButtonVisibility && offsetRef.current) {
       const width = offsetRef.current.offsetWidth;
       document.documentElement.style.setProperty('--page-header-title-grid-width', `${width}px`);

package/lib/components/ScrollGradient/constants.js

@@ -8,6 +8,7 @@
 'use strict';
 
 var React = require('react');
+var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
 const ScrollStates = {
   // No scrolling required because content fits within container.
@@ -40,7 +41,7 @@ const useIsOverflow = ref => {
       }
     };
   });
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     const {
       current
     } = ref;

package/lib/components/Tearsheet/TearsheetShell.js

@@ -272,18 +272,16 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
       }),
       closeModal: onClose,
       iconDescription: effectiveHasCloseIcon ? closeIconDescription : undefined
-    }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
+    }, /*#__PURE__*/React.createElement(react.Section, {
       className: `${bc}__header-content`,
       element: wide ? react.Layer : undefined
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__header-fields`
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      element: "h2",
       className: `${bcModalHeader}__label`
-    }, label), /*#__PURE__*/React.createElement(Wrap.Wrap, {
-      element: "h3",
+    }, label), /*#__PURE__*/React.createElement(react.Section, {
       className: cx(`${bcModalHeader}__heading`, `${bc}__heading`)
-    }, title), /*#__PURE__*/React.createElement(Wrap.Wrap, {
+    }, /*#__PURE__*/React.createElement(react.Heading, null, title)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__header-description`
     }, description)), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__header-actions`

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

@@ -0,0 +1,97 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+var React = require('react');
+var useResizeObserver = require('../../../global/js/hooks/useResizeObserver.js');
+
+const StackContext = /*#__PURE__*/React.createContext(undefined);
+const StackProvider = _ref => {
+  let {
+    children,
+    stackStepSize = 'lg'
+  } = _ref;
+  const [stack, setStack] = React.useState([]);
+  const _containerRef = React.useRef(null);
+  const bufferMap = {
+    sm: 0.5,
+    md: 0.75,
+    lg: 1
+  };
+  const {
+    width
+  } = useResizeObserver.useResizeObserver(_containerRef);
+
+  // this method will register/ unregister tearsheet ids in a simple array based on open status
+  const notifyStack = React.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 = React.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.createElement(StackContext.Provider, {
+    value: context
+  }, children);
+};
+const useStackContext = () => {
+  const context = React.useContext(StackContext);
+  if (context === undefined) {
+    return {
+      notifyStack: () => {},
+      stack: [],
+      getDepth: () => -1,
+      getScaleFactor: () => 1,
+      getBlockSizeChange: () => null
+    };
+  }
+  return context;
+};
+
+exports.StackProvider = StackProvider;
+exports.useStackContext = useStackContext;

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

@@ -18,7 +18,10 @@ var TearsheetBody = require('./TearsheetBody.js');
 var TearsheetHeaderActions = require('./TearsheetHeaderActions.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 useIsomorphicEffect = require('../../../global/js/hooks/useIsomorphicEffect.js');
 
 /**
  * ----------
@@ -37,13 +40,15 @@ const Tearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     ariaLabel,
     onClose,
     selectorPrimaryFocus,
-    open,
+    open = false,
     portalTarget,
+    verticalGap,
+    containerClassName,
     ...rest
   } = _ref;
   const carbonPrefix = react.usePrefix();
   const localRef = React.useRef(undefined);
-  const bodyRef = React.useRef(undefined);
+  const bodyRef = React.useRef(null);
   const modalRef = ref || localRef;
   const smMediaQuery = `(max-width: ${layout.breakpoints.md.width})`;
   const isSm = useMatchMedia.useMatchMedia(smMediaQuery) || variant === 'narrow';
@@ -55,8 +60,17 @@ const Tearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   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 uniqueId = React.useRef(useId.useId());
+  const {
+    notifyStack,
+    stack,
+    getDepth,
+    getScaleFactor,
+    getBlockSizeChange
+  } = StackContext.useStackContext();
+  const [depth, setDepth] = React.useState(0);
   const renderPortalUse = usePortalTarget.usePortalTarget(portalTarget);
-  React.useLayoutEffect(() => {
+  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
     document.documentElement.style.setProperty('--tearsheet-header-action-offset', `${headerActionMarginRight}px`);
@@ -66,9 +80,31 @@ const Tearsheet = /*#__PURE__*/React.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.useIsomorphicEffect(() => {
+    if (bodyRef.current) {
+      notifyStack?.(uniqueId.current, open, bodyRef.current);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [open]);
+  React.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.createElement(context.TearsheetContext.Provider, {
     value: {
       hasCloseIcon,
@@ -88,11 +124,13 @@ const Tearsheet = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     className: cx(context.blockClass, className, {
       [`${context.blockClass}--wide`]: variant === 'wide',
       [`${context.blockClass}--narrow`]: variant === 'narrow',
+      [`${context.blockClass}--stacked`]: depth > 0,
+      [`${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
     }),
-    containerClassName: cx(`${context.blockClass}__container`, {}),
+    containerClassName: cx(`${context.blockClass}__container`, containerClassName),
     onClose,
     open,
     selectorPrimaryFocus,
@@ -109,9 +147,7 @@ const Footer = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children
   } = _ref2;
-  return /*#__PURE__*/React.createElement(react.Layer, {
-    as: "footer",
-    withBackground: true,
+  return /*#__PURE__*/React.createElement("footer", {
     className: `${context.blockClass}__footer`,
     ref: ref
   }, children);

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

@@ -11,6 +11,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
+var cx = require('classnames');
 var context = require('./context.js');
 var SidePanel = require('../../SidePanel/SidePanel.js');
 var react = require('@carbon/react');
@@ -41,6 +42,7 @@ const MainContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     className,
+    isFlush,
     ...rest
   } = _ref2;
   const localRef = React.useRef(null);
@@ -71,7 +73,9 @@ const MainContent = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   });
   return /*#__PURE__*/React.createElement(react.Layer, _rollupPluginBabelHelpers.extends({
     withBackground: true,
-    className: `${context.blockClass}__main-content  ${className}`,
+    className: cx(`${context.blockClass}__main-content`, className, {
+      [`${context.blockClass}__flush`]: isFlush
+    }),
     ref: mainContentRef
   }, rest), children);
 });
@@ -87,18 +91,22 @@ const SummaryContent = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
     children,
     className,
     summaryPanelOpen = false,
-    onSummaryPanelClose
+    onSummaryPanelClose,
+    isFlush
   } = _ref3;
   const {
     isSm
   } = React.useContext(context.TearsheetContext);
   return !isSm ? /*#__PURE__*/React.createElement("div", {
-    className: `${context.blockClass}__summary-content ${className}`,
+    className: cx(`${context.blockClass}__summary-content`, className, {
+      [`${context.blockClass}__flush`]: isFlush
+    }),
     ref: ref
   }, /*#__PURE__*/React.createElement("aside", null, children)) : /*#__PURE__*/React.createElement(SidePanel.SidePanel, {
     size: "sm",
     open: summaryPanelOpen,
-    onRequestClose: onSummaryPanelClose
+    onRequestClose: onSummaryPanelClose,
+    className: className
   }, children);
 });
 const Influencer = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
@@ -106,19 +114,23 @@ const Influencer = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
     children,
     className,
     influencerPanelOpen = false,
-    onInfluencerPanelClose
+    onInfluencerPanelClose,
+    isFlush
   } = _ref4;
   const {
     isSm
   } = React.useContext(context.TearsheetContext);
   return !isSm ? /*#__PURE__*/React.createElement("aside", {
-    className: `${context.blockClass}__influencer ${className}`,
+    className: cx(`${context.blockClass}__influencer`, className, {
+      [`${context.blockClass}__flush`]: isFlush
+    }),
     ref: ref
   }, children) : /*#__PURE__*/React.createElement(SidePanel.SidePanel, {
     size: "sm",
     open: influencerPanelOpen,
     onRequestClose: onInfluencerPanelClose,
-    placement: "left"
+    placement: "left",
+    className: className
   }, children);
 });
 

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

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

package/lib/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
      */