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

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

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

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

@@ -4,7 +4,7 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import React, { ReactNode } from 'react';
+import React, { ReactNode, RefObject } from 'react';
 import { StepState } from '../../../StepFlow';
 interface Props {
     children?: ReactNode;
@@ -17,6 +17,7 @@ interface Props {
     selectorPrimaryFocus?: string;
     setOpen?: (open: boolean) => void;
     progressIndicator?: 'vertical' | 'horizontal';
+    launcherButtonRef?: RefObject<HTMLButtonElement | null>;
 }
-export declare const TearsheetWithSteps: ({ children, open, setOpen, onClose, influencer, title, hasCloseIcon, closeIconDescription, selectorPrimaryFocus, progressIndicator, ...rest }: Props) => React.JSX.Element;
+export declare const TearsheetWithSteps: ({ children, open, setOpen, onClose, influencer, title, hasCloseIcon, closeIconDescription, selectorPrimaryFocus, progressIndicator, launcherButtonRef, ...rest }: Props) => React.JSX.Element;
 export {};

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

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

package/lib/components/index.d.ts

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

package/lib/global/js/hooks/useCreateComponentFocus.js

@@ -30,11 +30,41 @@ const useCreateComponentFocus = _ref => {
       await wait.default(10);
       elm.focus();
     };
+    // FUNCTION TO ENSURE THE ELEMENT TARGETED IS NOT CONTAINED IN AN ELEMENT MARKED 'INERT'
+    const isNotContainedInInert = elm => {
+      if (!elm) return false;
+      const inertParent = elm.closest('[inert]');
+      return !inertParent || !inertParent.hasAttribute('inert') && !elm.disabled;
+    };
+    const getActiveStep = () => {
+      const allSteps = Array.from(document.querySelectorAll(blockClass));
+      return allSteps.find(el => {
+        let currentStep = el;
+        while (currentStep) {
+          if (currentStep.hasAttribute('inert')) return false;
+          currentStep = currentStep.parentElement;
+        }
+        return true;
+      });
+    };
+    const getFocusableElement = containingElement => {
+      const focusElementQuery = `button, input[type="button"], input, select, textarea, a[href]`;
+      // PREFER THE USER DEFINED firstFocusElement IF IT EXISTS
+      const firstFocusEl = containingElement.querySelector(firstFocusElement);
+      if (firstFocusEl && isNotContainedInInert(firstFocusEl) && !firstFocusEl.disabled) {
+        return firstFocusEl;
+      }
+      // BACKUP TO INTERACTIVE ELEMENT LIST
+      const bakFocusEl = Array.from(containingElement.querySelectorAll(focusElementQuery));
+      return bakFocusEl.find(el => isNotContainedInInert(el) && !el.disabled);
+    };
     if (previousState?.currentStep !== currentStep && currentStep > 0) {
-      if (firstFocusElement) {
-        const elm = document.querySelector(firstFocusElement);
-        if (elm) {
-          awaitFocus(elm);
+      // GET THE CURRENT STEP ELEMENT
+      const activeStepElement = getActiveStep();
+      if (activeStepElement && isNotContainedInInert(activeStepElement)) {
+        const focusEl = getFocusableElement(activeStepElement);
+        if (focusEl) {
+          awaitFocus(focusEl);
         }
       }
     }

package/lib/global/js/hooks/useIsomorphicEffect.d.ts

@@ -1,2 +1,8 @@
-export const useIsomorphicEffect: typeof useEffect;
+/**
+ * Copyright IBM Corp. 2024, 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 { useEffect } from 'react';
+export declare const useIsomorphicEffect: typeof useEffect;

package/lib/global/js/hooks/useIsomorphicEffect.js

@@ -9,8 +9,7 @@
 
 var React = require('react');
 
-// Originally from `@carbon/react`, https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/internal/useIsomorphicEffect.js
-// useLayoutEffect on the client, useEffect on the server
+// Custom hook that uses either `useLayoutEffect` or `useEffect` based on the environment (client-side or server-side).
 const useIsomorphicEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 
 exports.useIsomorphicEffect = useIsomorphicEffect;

package/lib/global/js/hooks/useResizeObserver.js

@@ -8,6 +8,7 @@
 'use strict';
 
 var React = require('react');
+var useIsomorphicEffect = require('./useIsomorphicEffect.js');
 
 const useResizeObserver = (ref, onResize) => {
   const [width, setWidth] = React.useState(-1);
@@ -15,7 +16,7 @@ const useResizeObserver = (ref, onResize) => {
   const entriesToHandle = React.useRef(null);
   const cb = React.useRef(onResize);
   React.useEffect(() => {
-    // ref for onResize removes it as dependency from useLayoutEffect
+    // ref for onResize removes it as dependency from useIsomorphicEffect
     // This significantly reduces repeated calls if a function is redefined on every
     // render
     cb.current = onResize;
@@ -37,7 +38,7 @@ const useResizeObserver = (ref, onResize) => {
     // Ignoring exhaustive-deps as we do NOT want to include the ref in dep array
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [width, height]);
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     if (!ref?.current) {
       return;
     }

package/lib/global/js/hooks/useWindowResize.js

@@ -8,6 +8,7 @@
 'use strict';
 
 var React = require('react');
+var useIsomorphicEffect = require('./useIsomorphicEffect.js');
 
 const windowExists = typeof window !== `undefined`;
 const getWindowSize = () => {
@@ -49,7 +50,7 @@ const useWindowResize = function (effect, deps) {
     windowSize.current = newVal.current;
     throttleTimeout.current = null;
   };
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     const handleResize = () => {
       if (throttleInterval) {
         if (throttleTimeout.current === null) {

package/lib/global/js/hooks/useWindowScroll.js

@@ -8,6 +8,7 @@
 'use strict';
 
 var React = require('react');
+var useIsomorphicEffect = require('./useIsomorphicEffect.js');
 var scrollableAncestor = require('../utils/scrollableAncestor.js');
 
 const windowExists = typeof window !== `undefined`;
@@ -46,7 +47,7 @@ const useTargetScroll = function (target, effect, deps, throttleInterval) {
     scrollPosition.current = newVal.current;
     throttleTimeout.current = null;
   };
-  React.useLayoutEffect(() => {
+  useIsomorphicEffect.useIsomorphicEffect(() => {
     const handleScroll = () => {
       if (throttleInterval) {
         if (throttleTimeout.current === null) {

package/lib/index.js

@@ -49,18 +49,19 @@ var SingleAddSelect = require('./components/SingleAddSelect/SingleAddSelect.js')
 var StatusIcon = require('./components/StatusIcon/StatusIcon.js');
 var TagOverflow = require('./components/TagOverflow/TagOverflow.js');
 var TagSet = require('./components/TagSet/TagSet.js');
-var Tearsheet = require('./components/Tearsheet/Tearsheet.js');
+var Tearsheet$1 = require('./components/Tearsheet/Tearsheet.js');
 var TearsheetNarrow = require('./components/Tearsheet/TearsheetNarrow.js');
 var WebTerminal = require('./components/WebTerminal/WebTerminal.js');
 var WebTerminalContentWrapper = require('./components/WebTerminal/WebTerminalContentWrapper.js');
-var index$6 = require('./components/WebTerminal/hooks/index.js');
+var index$5 = require('./components/WebTerminal/hooks/index.js');
 var index = require('./components/Coachmark/next/Coachmark/index.js');
 var index$1 = require('./components/Coachmark/next/Coachmark/CoachmarkTagline/index.js');
 var index$2 = require('./components/Coachmark/next/Coachmark/CoachmarkBeacon/index.js');
 var TruncatedText = require('./components/TruncatedText/TruncatedText.js');
-var index$5 = require('./components/FeatureFlags/index.js');
+var index$4 = require('./components/FeatureFlags/index.js');
 var index$3 = require('./components/PageHeader/next/index.js');
-var index$4 = require('./components/Tearsheet/next/index.js');
+var Tearsheet = require('./components/Tearsheet/next/Tearsheet.js');
+var StackContext = require('./components/Tearsheet/next/StackContext.js');
 var BigNumber = require('./components/BigNumber/BigNumber.js');
 var Coachmark = require('./components/Coachmark/Coachmark.js');
 var enums = require('./components/Coachmark/utils/enums.js');
@@ -89,7 +90,7 @@ var ToolbarButton = require('./components/Toolbar/ToolbarButton.js');
 var ToolbarGroup = require('./components/Toolbar/ToolbarGroup.js');
 var TruncatedList = require('./components/TruncatedList/TruncatedList.js');
 var ComboButton = require('./components/ComboButton/ComboButton.js');
-var index$7 = require('./components/ComboButton/ComboButtonItem/index.js');
+var index$6 = require('./components/ComboButton/ComboButtonItem/index.js');
 var Datagrid = require('./components/Datagrid/Datagrid/Datagrid.js');
 var useDatagrid = require('./components/Datagrid/useDatagrid.js');
 var useInfiniteScroll = require('./components/Datagrid/useInfiniteScroll.js');
@@ -192,21 +193,22 @@ exports.SingleAddSelect = SingleAddSelect.SingleAddSelect;
 exports.StatusIcon = StatusIcon.StatusIcon;
 exports.TagOverflow = TagOverflow.TagOverflow;
 exports.TagSet = TagSet.TagSet;
-exports.Tearsheet = Tearsheet.Tearsheet;
+exports.Tearsheet = Tearsheet$1.Tearsheet;
 exports.TearsheetNarrow = TearsheetNarrow.TearsheetNarrow;
 exports.WebTerminal = WebTerminal.WebTerminal;
 exports.WebTerminalContentWrapper = WebTerminalContentWrapper.WebTerminalContentWrapper;
-exports.WebTerminalProvider = index$6.WebTerminalProvider;
-exports.useWebTerminal = index$6.useWebTerminal;
+exports.WebTerminalProvider = index$5.WebTerminalProvider;
+exports.useWebTerminal = index$5.useWebTerminal;
 exports.preview__Coachmark = index;
 exports.preview__CoachmarkTagline = index$1;
 exports.preview__CoachmarkBeacon = index$2;
 exports.preview__TruncatedText = TruncatedText.TruncatedText;
-exports.preview__FeatureFlags = index$5.FeatureFlags;
-exports.preview__useFeatureFlag = index$5.useFeatureFlag;
-exports.preview__useFeatureFlags = index$5.useFeatureFlags;
+exports.preview__FeatureFlags = index$4.FeatureFlags;
+exports.preview__useFeatureFlag = index$4.useFeatureFlag;
+exports.preview__useFeatureFlags = index$4.useFeatureFlags;
 exports.preview__PageHeader = index$3;
-exports.preview__Tearsheet = index$4;
+exports.preview__Tearsheet = Tearsheet.Tearsheet;
+exports.StackProvider = StackContext.StackProvider;
 exports.previewCandidate__BigNumber = BigNumber.BigNumber;
 exports.previewCandidate__Coachmark = Coachmark.Coachmark;
 exports.BEACON_KIND = enums.BEACON_KIND;
@@ -236,7 +238,7 @@ exports.previewCandidate__ToolbarButton = ToolbarButton.ToolbarButton;
 exports.previewCandidate__ToolbarGroup = ToolbarGroup.ToolbarGroup;
 exports.previewCandidate__TruncatedList = TruncatedList.TruncatedList;
 exports.ComboButton = ComboButton.ComboButton;
-exports.ComboButtonItem = index$7.ComboButtonItem;
+exports.ComboButtonItem = index$6.ComboButtonItem;
 exports.Datagrid = Datagrid.Datagrid;
 exports.useDatagrid = useDatagrid.default;
 exports.useInfiniteScroll = useInfiniteScroll.default;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.79.0",
+  "version": "2.80.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -67,7 +67,7 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@carbon/styles": "^1.93.1",
+    "@carbon/styles": "^1.94.0",
     "@figma/code-connect": "^1.3.5",
     "@ibm/telemetry-js-config-generator": "^2.0.1",
     "@percy/cli": "^1.31.0",
@@ -82,7 +82,7 @@
     "@storybook/react-vite": "^9.0.13",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.37.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.38.0-rc.0",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
     "copyfiles": "^2.4.1",
@@ -90,7 +90,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.38.0",
+    "jest-config-ibm-cloud-cognitive": "^1.39.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-run-all2": "^8.0.0",
@@ -110,10 +110,10 @@
     "@babel/runtime": "^7.26.10",
     "@carbon-labs/react-resizer": "^0.10.0",
     "@carbon/feature-flags": "^0.32.0",
-    "@carbon/ibm-products-styles": "^2.75.0",
+    "@carbon/ibm-products-styles": "^2.76.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
-    "@carbon/utilities": "^0.10.0",
-    "@carbon/utilities-react": "0.13.0",
+    "@carbon/utilities": "^0.12.0",
+    "@carbon/utilities-react": "0.15.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^9.0.0",
     "@dnd-kit/sortable": "^10.0.0",
@@ -123,14 +123,14 @@
     "react-window": "^1.8.11"
   },
   "peerDependencies": {
-    "@carbon/grid": "^11.44.0",
-    "@carbon/layout": "^11.42.0",
-    "@carbon/motion": "^11.36.0",
-    "@carbon/react": "^1.92.1",
-    "@carbon/themes": "^11.61.0",
-    "@carbon/type": "^11.48.0",
+    "@carbon/grid": "^11.45.0",
+    "@carbon/layout": "^11.43.0",
+    "@carbon/motion": "^11.37.0",
+    "@carbon/react": "^1.95.0",
+    "@carbon/themes": "^11.62.0",
+    "@carbon/type": "^11.49.0",
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0"
   },
-  "gitHead": "02d6f4fe2d1dc65327ae5c9fdae4bd92ab5c3bcd"
+  "gitHead": "18c246c4b4f3cae35f0056cb73f68b68fb0b534d"
 }

package/scss/components/Tearsheet/_tearsheet.scss

@@ -51,6 +51,17 @@ $motion-duration: $duration-moderate-02;
       }
     }
 
+    &:not(.is-visible) {
+      &.#{$block-class}.#{$block-class} .#{$block-class}__container {
+        // we want the enter/leave animation to run up most of the height of the
+        // viewport, capped at 500px to set an upper limit on the movement speed
+        // For the reason for calc() see https://github.com/sass/sass/issues/2849
+        // and https://github.com/sass/node-sass/issues/2815.
+        // stylelint-disable-next-line carbon/layout-use
+        transform: translate3d(0, calc(min(95vh, 500px)), 0);
+      }
+    }
+
     &.#{$block-class}.#{$block-class} {
       /* tearsheet uses --overlay-color and --overlay-opacity in ::before */
       background: initial;
@@ -106,12 +117,6 @@ $motion-duration: $duration-moderate-02;
     block-size: 100%;
     inset-block-start: auto;
     max-block-size: calc(100% - #{$spacing-09});
-    // we want the enter/leave animation to run up most of the height of the
-    // viewport, capped at 500px to set an upper limit on the movement speed
-    // For the reason for calc() see https://github.com/sass/sass/issues/2849
-    // and https://github.com/sass/node-sass/issues/2815.
-    // stylelint-disable-next-line carbon/layout-use
-    transform: translate3d(0, calc(min(95vh, 500px)), 0);
   }
 
   &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-slug