@carbon/ibm-products 2.67.0 → 2.68.0

package/lib/components/InterstitialScreen/InterstitialScreenHeader.js

@@ -31,15 +31,17 @@ const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef(props => {
     bodyChildrenData,
     isFullScreen,
     progStep,
-    handleClose
+    handleClose,
+    stepCount
   } = React.useContext(InterstitialScreen.InterstitialScreenContext);
   const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
   const headerBlockClass = `${blockClass}--internal-header`;
   const _useId = useId.useId();
+  const carbonPrefix = react.usePrefix();
   const headerContent = () => {
     return /*#__PURE__*/React.createElement(React.Fragment, null, (headerTitle || headerSubTitle) && /*#__PURE__*/React.createElement("div", {
       className: `${blockClass}--titleContainer`
-    }, headerTitle && (_h || (_h = /*#__PURE__*/React.createElement("h2", null, headerTitle))), headerSubTitle && (_h2 || (_h2 = /*#__PURE__*/React.createElement("h3", null, headerSubTitle)))), children, !hideProgressIndicator && bodyChildrenData && Array.isArray(bodyChildrenData) && /*#__PURE__*/React.createElement("div", {
+    }, headerTitle && (_h || (_h = /*#__PURE__*/React.createElement("h1", null, headerTitle))), headerSubTitle && (_h2 || (_h2 = /*#__PURE__*/React.createElement("h2", null, headerSubTitle)))), children, !hideProgressIndicator && bodyChildrenData && Array.isArray(bodyChildrenData) && /*#__PURE__*/React.createElement("div", {
       className: `${blockClass}--progress`
     }, /*#__PURE__*/React.createElement(react.ProgressIndicator, {
       vertical: false,
@@ -53,7 +55,11 @@ const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef(props => {
           translateWithId: child.props.translateWithId
         });
       }
-    }))));
+    })), /*#__PURE__*/React.createElement("div", {
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      className: `${carbonPrefix}--visually-hidden`
+    }, "Step ", progStep + 1, " of ", stepCount)));
   };
   return isFullScreen ? /*#__PURE__*/React.createElement("header", {
     className: cx(headerBlockClass, className, {

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -160,7 +160,7 @@ const utilGetBreadcrumbItemForTitle = (blockClass, collapseTitle, title) => {
     if (title.text !== undefined) {
       // Shape title provided
       breadcrumbTitle = {
-        label: /*#__PURE__*/React.createElement("span", null, title.loading ? _SkeletonText || (_SkeletonText = /*#__PURE__*/React.createElement(react.SkeletonText, null)) : title.text),
+        label: title.loading ? _SkeletonText || (_SkeletonText = /*#__PURE__*/React.createElement(react.SkeletonText, null)) : title.text,
         title: title.text
       };
     } else if (title.content !== undefined) {
@@ -178,6 +178,7 @@ const utilGetBreadcrumbItemForTitle = (blockClass, collapseTitle, title) => {
     if (breadcrumbTitle) {
       breadcrumbTitle.key = 'breadcrumb-title';
       breadcrumbTitle.isCurrentPage = true;
+      breadcrumbTitle.href = '#';
       breadcrumbTitle.className = cx([`${blockClass}__breadcrumb-title`, {
         [`${blockClass}__breadcrumb-title--pre-collapsed`]: collapseTitle
       }]);

package/lib/components/Tearsheet/TearsheetShell.js

@@ -307,7 +307,6 @@ const TearsheetShell = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     }, /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: `${bc}__content`,
       alwaysRender: !!(influencer && influencerPosition === 'right'),
-      tabIndex: -1,
       element: SectionLevel3
     }, children), /*#__PURE__*/React.createElement(Wrap.Wrap, {
       className: cx({

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

@@ -1,4 +1,11 @@
-export function useResizeObserver(ref: any, callback: any, deps?: any[]): {
+/**
+ * Copyright IBM Corp. 2023, 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 { RefObject } from 'react';
+export declare const useResizeObserver: (ref: RefObject<HTMLElement>, onResize?: (rect: DOMRectReadOnly) => void) => {
     width: number;
     height: number;
 };

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

@@ -9,24 +9,23 @@
 
 var React = require('react');
 
-const useResizeObserver = function (ref, callback) {
-  let deps = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : [];
+const useResizeObserver = (ref, onResize) => {
   const [width, setWidth] = React.useState(-1);
   const [height, setHeight] = React.useState(-1);
   const entriesToHandle = React.useRef(null);
-  const cb = React.useRef(callback);
+  const cb = React.useRef(onResize);
   React.useEffect(() => {
-    // ref for callback removes it as dependency from useLayoutEffect
+    // ref for onResize removes it as dependency from useLayoutEffect
     // This significantly reduces repeated calls if a function is redefined on every
     // render
-    cb.current = callback;
-  }, [callback]);
+    cb.current = onResize;
+  }, [onResize]);
   React.useEffect(() => {
     const getInitialSize = () => {
       if (ref.current) {
         const refComputedStyle = window.getComputedStyle(ref.current);
-        const initialWidth = (ref.current?.offsetWidth || 0) - (parseFloat(refComputedStyle?.paddingLeft || 0), parseFloat(refComputedStyle?.paddingRight || 0));
-        const initialHeight = (ref.current?.offsetHeight || 0) - (parseFloat(refComputedStyle?.paddingTop || 0), parseFloat(refComputedStyle?.paddingLeft || 0));
+        const initialWidth = (ref.current?.offsetWidth ?? 0) - (typeof refComputedStyle?.paddingLeft === 'string' && refComputedStyle?.paddingLeft.length ? parseFloat(refComputedStyle?.paddingLeft) : 0) - (typeof refComputedStyle?.paddingRight === 'string' && refComputedStyle?.paddingRight.length ? parseFloat(refComputedStyle?.paddingRight) : 0);
+        const initialHeight = (ref.current?.offsetHeight ?? 0) - (typeof refComputedStyle?.paddingTop === 'string' && refComputedStyle?.paddingTop.length ? parseFloat(refComputedStyle?.paddingTop) : 0) - (typeof refComputedStyle?.paddingBottom === 'string' && refComputedStyle?.paddingBottom.length ? parseFloat(refComputedStyle?.paddingBottom) : 0);
         setWidth(initialWidth);
         setHeight(initialHeight);
       }
@@ -35,8 +34,9 @@ const useResizeObserver = function (ref, callback) {
       return;
     }
     getInitialSize();
+    // 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, ref.current, ...deps]);
+  }, [width, height]);
   React.useLayoutEffect(() => {
     if (!ref?.current) {
       return;
@@ -50,7 +50,7 @@ const useResizeObserver = function (ref, callback) {
       setHeight(entry.contentRect.height);
       cb.current && cb.current(entry.contentRect);
     };
-    let observer = new ResizeObserver(entries => {
+    const observer = new ResizeObserver(entries => {
       // always update entriesToHandle
       entriesToHandle.current = entries;
       window.requestAnimationFrame(() => {
@@ -62,11 +62,10 @@ const useResizeObserver = function (ref, callback) {
     // observe all refs passed
     observer.observe(ref.current);
     return () => {
-      observer?.disconnect();
-      observer = null;
+      observer.disconnect();
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [ref.current, ...deps]);
+  }, [ref.current]);
   return {
     width,
     height

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.67.0",
+  "version": "2.68.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -95,7 +95,7 @@
     "@storybook/theming": "^8.6.12",
     "@types/react-table": "^7.7.20",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-ibm-cloud-cognitive": "^0.25.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.26.0",
     "chalk": "^4.1.2",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
@@ -104,7 +104,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.26.0",
+    "jest-config-ibm-cloud-cognitive": "^1.27.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^18.0.0",
@@ -120,7 +120,7 @@
   "dependencies": {
     "@babel/runtime": "^7.26.10",
     "@carbon/feature-flags": "^0.26.0",
-    "@carbon/ibm-products-styles": "^2.63.0",
+    "@carbon/ibm-products-styles": "^2.64.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.5.0",
     "@carbon/utilities-react": "0.7.0",
@@ -142,5 +142,5 @@
     "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": "814c1a14aeeeecd6d954b45db355d5720b0e5a49"
+  "gitHead": "b17f047c13c438ecf4a53c66381ed9fdcbf0c7e7"
 }

package/scss/components/AboutModal/_about-modal.scss

@@ -25,9 +25,11 @@ $block-class: #{c4p-settings.$pkg-prefix}--about-modal;
 }
 
 .#{$block-class} .#{$block-class}__header {
-  padding: 0 20% 0 $spacing-05;
+  padding: 0;
   grid-row: auto;
   margin-block-end: 0;
+  padding-inline-end: 20%;
+  padding-inline-start: $spacing-05;
 }
 
 .#{$block-class} .#{$block-class}__title {

package/scss/components/BreadcrumbWithOverflow/_breadcrumb-with-overflow.scss

@@ -80,7 +80,6 @@ $_block-class: #{c4p-settings.$pkg-prefix}--breadcrumb-with-overflow;
 
   .#{$_block-class}__displayed-breadcrumb:last-child {
     display: inline-flex; // flex instead of block due to spacing
-    overflow: hidden;
   }
 
   .#{$_block-class}__displayed-breadcrumb:last-child

package/scss/components/Carousel/_carousel.scss

@@ -13,6 +13,7 @@
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/themes';
 @use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities';
 @use '../../global/styles/project-settings' as c4p-settings;
 
 // The block part of our conventional BEM class names (blockClass__E--M).
@@ -60,6 +61,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--carousel;
   -ms-user-select: none;
   user-select: none;
 
+  &:focus {
+    @include utilities.focus-outline('outline');
+  }
+
   /* stylelint-disable-next-line max-nesting-depth */
   @media (prefers-reduced-motion) {
     scroll-behavior: auto;

package/scss/components/Datagrid/styles/_draggableElement.scss

@@ -11,13 +11,24 @@
 @use '@carbon/styles/scss/motion' as *;
 @use './variables';
 
+// Drag handle.
 .#{variables.$block-class}__draggable-handleStyle {
-  display: flex;
-  align-items: center;
+  // Cancel out default button styling.
+  padding: 0;
+  border: none;
+  background: none;
+
+  cursor: grab;
   margin-inline-end: $spacing-03;
 }
 
+.#{variables.$block-class}__draggable-handleStyle:active,
+.#{variables.$block-class}__draggable-handleHolder--dragging {
+  cursor: grabbing;
+}
+
 .#{variables.$block-class}__draggable-handleStyle.disabled {
+  cursor: none;
   pointer-events: none;
 }
 
@@ -39,13 +50,13 @@
   inline-size: 100%;
 }
 
+// The draggable element itself.
 .#{variables.$block-class}__draggable-handleHolder {
   position: relative; // above underlay
   display: flex;
   background-color: $layer;
   block-size: $spacing-09;
   border-block-end: 1px solid $layer-active;
-  cursor: grab;
 }
 
 .#{variables.$block-class}__draggable-handleHolder:hover {
@@ -68,11 +79,6 @@
   outline: none;
 }
 
-.#{variables.$block-class}__draggable-handleHolder:active,
-.#{variables.$block-class}__draggable-handleHolder--dragging {
-  cursor: grabbing;
-}
-
 .#{variables.$block-class}__draggable-handleHolder-selected:hover {
   background-color: $layer-selected-hover-01;
 }

package/scss/components/Datagrid/styles/addons/_CustomizeColumnsTearsheet.scss

@@ -38,13 +38,6 @@
   justify-content: center;
 }
 
-.#{variables.$block-class}__customize-columns-column-list
-  .#{variables.$block-class}__customize-columns-checkbox-visible-label {
-  // Disabling linter only to match the spacing that Carbon uses for the Checkbox label
-  /* stylelint-disable-next-line */
-  padding-inline-start: convert.to-rem(6px);
-}
-
 .#{variables.$block-class}__customize-columns-column-list
   .#{variables.$block-class}__customize-columns-checkbox-wrapper.#{c4p-settings.$carbon-prefix}--form-item {
   margin-block-end: 0;

package/scss/components/FilterSummary/_filter-summary.scss

@@ -9,7 +9,6 @@
 @use '@carbon/styles/scss/spacing' as *;
 @use '@carbon/styles/scss/theme' as *;
 @use '@carbon/styles/scss/motion' as *;
-@use './animations' as *;
 
 $block-class: #{$pkg-prefix}--filter-summary;
 
@@ -31,10 +30,6 @@ $block-class: #{$pkg-prefix}--filter-summary;
   &.#{$block-class}__expanded {
     block-size: fit-content;
   }
-  .#{$pkg-prefix}--tag-set__tag-container {
-    animation: filter-summary-enter $duration-moderate-01
-      motion(entrance, productive) forwards;
-  }
 }
 
 .#{$block-class}

package/scss/components/InterstitialScreen/_interstitial-screen.scss

@@ -70,7 +70,7 @@ $one-grid-column: calc(100% / 16);
     .#{$block-class}--titleContainer {
       margin-block-end: $spacing-05;
 
-      h2 {
+      h1 {
         @include type.type-style('productive-heading-04');
 
         margin-block-end: $spacing-03;
@@ -80,7 +80,7 @@ $one-grid-column: calc(100% / 16);
         }
       }
 
-      h3 {
+      h2 {
         @include type.type-style('productive-heading-03');
 
         &:empty {

package/scss/global/styles/_display-box.scss

@@ -41,10 +41,8 @@ $indicator-height: $spacing-04;
 }
 
 .sb-main-centered .#{$block-class}__message {
-  inset-inline-start: 50%;
-  min-inline-size: 100vh;
+  inline-size: inherit;
   text-align: center;
-  transform: translateX(-50%);
 }
 
 .#{$block-class}__indicator--left,

package/telemetry.yml

@@ -515,6 +515,7 @@ collect:
         # Carousel
         - disableArrowScroll
         - fadedEdgeColor
+        - isScrollMode
         - onChangeIsScrollable
         # Checklist
         - chartLabel

package/scss/components/FilterSummary/_animations.scss

@@ -1,20 +0,0 @@
-//
-// 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.
-//
-@keyframes filter-summary-enter {
-  0% {
-    block-size: 0;
-    opacity: 0;
-    /* Move from top */
-    transform: translateY(calc(var(--panel-transform) * -1));
-  }
-
-  100% {
-    block-size: var(--panel-transform);
-    opacity: 1;
-    transform: translateY(0);
-  }
-}