@carbon/ibm-products 2.73.1 → 2.74.0

package/lib/components/StepFlow/types.d.ts

@@ -0,0 +1,22 @@
+/**
+ * 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 { Dispatch, SetStateAction } from 'react';
+export type StepContextType = StepState;
+interface formStateType {
+    [key: string]: any;
+}
+export interface StepState {
+    formState: formStateType;
+    setFormState: Dispatch<SetStateAction<formStateType>>;
+    totalSteps: number | undefined;
+    setTotalSteps: Dispatch<SetStateAction<number | undefined>>;
+    currentStep: number;
+    handleGoToStep: (a: number) => void;
+    handleNext: () => void;
+    handlePrevious: () => void;
+}
+export {};

package/lib/components/TruncatedText/TruncatedText.js

@@ -56,12 +56,14 @@ exports.TruncatedText = /*#__PURE__*/React.forwardRef((props, ref) => {
       handleExpand();
     }
   };
-  const valueBody = /*#__PURE__*/React.createElement("span", {
+  const valueBody = /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({}, type === 'tooltip' ? {
+    role: 'button'
+  } : {}, {
     ref: contentRef,
     className: textContentClasses,
     id: id,
     style: textContentStyles
-  }, value);
+  }), value);
   const tooltipVariant = /*#__PURE__*/React.createElement(react.Tooltip, {
     align: align,
     autoAlign: autoAlign,

package/lib/global/js/utils/makeDraggable/makeDraggable.js

@@ -34,7 +34,29 @@ function makeDraggable(_ref) {
   let isDragging = false;
   let offsetX = 0;
   let offsetY = 0;
+  function dispatch(type) {
+    let detail = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    el.dispatchEvent(new CustomEvent(type, {
+      detail,
+      bubbles: true
+    }));
+  }
   function onKeyDown(e) {
+    if (e.key === 'Enter') {
+      isDragging = !isDragging;
+    }
+    if (isDragging) {
+      dispatch('dragstart', {
+        keyboard: true
+      });
+    } else {
+      dispatch('dragend', {
+        keyboard: true
+      });
+    }
+    if (!isDragging) {
+      return;
+    }
     const distance = e.shiftKey ? shiftDragStep ?? 32 : dragStep ?? 8;
     switch (e.key) {
       case 'Enter':
@@ -63,6 +85,9 @@ function makeDraggable(_ref) {
     offsetX = e.clientX - el.offsetLeft;
     offsetY = e.clientY - el.offsetTop;
     isDragging = true;
+    dispatch('dragstart', {
+      mouse: true
+    });
     document.addEventListener('mousemove', onMouseMove);
     document.addEventListener('mouseup', onMouseUp, {
       once: true
@@ -80,6 +105,9 @@ function makeDraggable(_ref) {
       return;
     }
     isDragging = false;
+    dispatch('dragend', {
+      mouse: true
+    });
     document.removeEventListener('mousemove', onMouseMove);
   }
   if (dragHandle) {

package/lib/index.js

@@ -23,7 +23,7 @@ var CreateTearsheetStep = require('./components/CreateTearsheet/CreateTearsheetS
 var CreateTearsheetDivider = require('./components/CreateTearsheet/CreateTearsheetDivider.js');
 var CreateTearsheetNarrow = require('./components/CreateTearsheetNarrow/CreateTearsheetNarrow.js');
 var EmptyState = require('./components/EmptyStates/EmptyState.js');
-var EmptyStateV2 = require('./components/EmptyStates/EmptyStateV2.js');
+var EmptyStateV2_deprecated = require('./components/EmptyStates/EmptyStateV2.deprecated.js');
 var ErrorEmptyState = require('./components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js');
 var NoDataEmptyState = require('./components/EmptyStates/NoDataEmptyState/NoDataEmptyState.js');
 var NoTagsEmptyState = require('./components/EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js');
@@ -199,7 +199,7 @@ Object.defineProperty(exports, "EmptyState", {
 });
 Object.defineProperty(exports, "EmptyStateV2", {
 	enumerable: true,
-	get: function () { return EmptyStateV2.EmptyStateV2; }
+	get: function () { return EmptyStateV2_deprecated.EmptyStateV2; }
 });
 Object.defineProperty(exports, "ErrorEmptyState", {
 	enumerable: true,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.73.1",
+  "version": "2.74.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -70,7 +70,7 @@
     "@babel/preset-typescript": "^7.26.0",
     "@ibm/telemetry-js-config-generator": "^2.0.1",
     "@percy/cli": "^1.31.0",
-    "@percy/storybook": "^6.0.4",
+    "@percy/storybook": "^9.0.0",
     "@rollup/plugin-babel": "^6.0.4",
     "@rollup/plugin-commonjs": "^28.0.3",
     "@rollup/plugin-node-resolve": "^16.0.1",
@@ -81,7 +81,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.31.0",
+    "babel-preset-ibm-cloud-cognitive": "^0.32.0",
     "chalk": "^4.1.2",
     "change-case": "5.4.4",
     "classnames": "^2.5.1",
@@ -90,7 +90,7 @@
     "fs-extra": "^11.3.0",
     "glob": "^11.0.1",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.32.0",
+    "jest-config-ibm-cloud-cognitive": "^1.33.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-run-all": "^4.1.5",
@@ -101,7 +101,7 @@
     "rollup-plugin-strip-banner": "^3.1.0",
     "sass": "^1.85.1",
     "storybook": "^9.0.8",
-    "typescript-config-carbon": "^0.5.0",
+    "typescript-config-carbon": "^0.6.0",
     "vite": "^7.0.0",
     "yargs": "^18.0.0"
   },
@@ -109,7 +109,7 @@
     "@babel/runtime": "^7.26.10",
     "@carbon-labs/react-resizer": "^0.6.0",
     "@carbon/feature-flags": "^0.28.1",
-    "@carbon/ibm-products-styles": "^2.69.0",
+    "@carbon/ibm-products-styles": "^2.70.0",
     "@carbon/telemetry": "^0.1.0",
     "@carbon/utilities": "^0.7.0",
     "@carbon/utilities-react": "0.10.0",
@@ -131,5 +131,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": "206630f346c4723f2074936660a4a0dfffb703f5"
+  "gitHead": "308b923854caeff69eb77e23e687ca3709d5fe92"
 }

package/scss/components/Coachmark/_coachmark.scss

@@ -9,6 +9,8 @@
 @use '../../global/styles/project-settings' as c4p-settings;
 @use '../../global/styles/mixins';
 @use '@carbon/styles/scss/config';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
 
 @use './coachmark-dragbar';
 @use './coachmark-header';
@@ -43,4 +45,9 @@ $block-class-next: #{c4p-settings.$pkg-prefix}--coachmark__next;
       margin-inline-end: auto;
     }
   }
+  .#{$block-class-next}--content-header--is-dragging {
+    border-radius: 0;
+    box-shadow: 0 0 0 $spacing-02 $icon-inverse;
+    outline: $spacing-01 solid $background-inverse;
+  }
 }

package/scss/components/ConditionBuilder/styles/_conditionBuilderCondition.scss

@@ -88,3 +88,27 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   > .#{$block-class}__groupConnector {
   margin-block-end: 0;
 }
+
+.#{$block-class}__readonly {
+  .#{$block-class}__condition-inner-block,
+  .#{$block-class}__connector,
+  .#{$block-class}__action-block,
+  .#{$block-class}__add-condition-wrapper,
+  .#{$block-class}__groupConnector {
+    background: transparent;
+    box-shadow: inset 0 0 0 1px $border-subtle-00;
+
+    button {
+      background: transparent;
+      cursor: default;
+
+      svg {
+        color: $icon-disabled;
+      }
+    }
+  }
+}
+
+.#{$block-class}__condition-inner-block {
+  display: flex;
+}

package/scss/components/ConditionBuilder/styles/_conditionBuilderItem.scss

@@ -61,7 +61,23 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   padding-inline: $spacing-05;
 }
 
-.#{$block-class}__item-option__option:hover {
+.#{$block-class}__item-option__option[aria-disabled] {
+  color: $text-disabled;
+
+  &:hover {
+    cursor: not-allowed;
+  }
+
+  &:focus {
+    cursor: not-allowed;
+    outline: none;
+  }
+}
+.#{$block-class}__item-option__option[aria-hidden] {
+  display: none;
+}
+
+.#{$block-class}__item-option__option:not([aria-disabled]):hover {
   background-color: $layer-hover;
 }
 
@@ -91,17 +107,15 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   border-block-start: 0.0625rem solid $border-subtle;
 }
 
-.#{$block-class}__item-option__option:hover
-  .#{$block-class}__item-option__option-content,
-.#{$block-class}__item-option__option[aria-selected='true']
-  .#{$block-class}__item-option__option-content,
-.#{$block-class}__item-option__option:hover
-  + .#{$block-class}__item-option__option
-  .#{$block-class}__item-option__option-content,
-.#{$block-class}__item-option__option[aria-selected='true']
-  + .#{$block-class}__item-option__option
-  .#{$block-class}__item-option__option-content {
-  border-block-start-color: transparent;
+.#{$block-class}__item-option__option:not([aria-disabled]) {
+  &:hover,
+  &[aria-selected='true'],
+  &:hover + .#{$block-class}__item-option__option,
+  &[aria-selected='true'] + .#{$block-class}__item-option__option {
+    .#{$block-class}__item-option__option-content {
+      border-block-start-color: transparent;
+    }
+  }
 }
 
 .#{$block-class}__item-option__option[aria-selected='true'] {

package/scss/components/SidePanel/_side-panel.scss

@@ -188,11 +188,16 @@ $clabs-prefix: 'clabs';
     --#{$block-class}--actions-height: #{$spacing-09};
   }
 
-  &.#{$block-class}--slide-in,
   &:not(.#{$block-class}--has-overlay) {
     box-shadow: 0 $spacing-01 $spacing-02 $overlay;
   }
 
+  // Slide-in panels should use border not shadows since they don’t layer
+  &.#{$block-class}--slide-in,
+  &.#{$block-class}--slide-in:not(.#{$block-class}--has-overlay) {
+    box-shadow: none;
+  }
+
   .#{$block-class}__actions-container {
     inline-size: 100%;
   }

package/scss/components/Tearsheet/_tearsheet.scss

@@ -209,6 +209,7 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}--wide .#{$block-class}__header {
+    overflow: visible;
     padding: $spacing-06 $spacing-07;
     margin: 0;
     background-color: $layer;

package/scss/components/TruncatedText/_truncated-text.scss

@@ -16,6 +16,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--truncated-text;
     display: -webkit-box;
     overflow: hidden;
     -webkit-box-orient: vertical;
+    line-height: initial;
     text-overflow: clip;
   }
 

package/telemetry.yml

@@ -295,6 +295,7 @@ collect:
         - productive
         - radio
         - reactTableFiltersState
+        - readOnly
         - readOnlyTable
         - renderIcon
         - renderMedia
@@ -537,7 +538,6 @@ collect:
         - toggleLabel
         - toggleLabelAlign
         # Coachmark
-        - defaultOpen
         - floating
         - isOpenByDefault
         - overlayClassName