@carbon/ibm-products 2.39.0 → 2.40.1-canary.6

package/lib/global/js/hooks/useFocus.js

@@ -13,7 +13,7 @@ var react = require('@carbon/react');
 var settings = require('../../../settings.js');
 var React = require('react');
 
-var useFocus = function useFocus(modalRef) {
+var useFocus = function useFocus(modalRef, selectorPrimaryFocus) {
   var carbonPrefix = react.usePrefix();
   var tearsheetBaseClass = "".concat(settings.pkg.prefix, "--tearsheet");
   // Querying focusable element in the modal
@@ -43,12 +43,14 @@ var useFocus = function useFocus(modalRef) {
     var first = (_focusableElements2 = focusableElements) === null || _focusableElements2 === void 0 ? void 0 : _focusableElements2[0];
     var last = (_focusableElements3 = focusableElements) === null || _focusableElements3 === void 0 ? void 0 : _focusableElements3[((_focusableElements4 = focusableElements) === null || _focusableElements4 === void 0 ? void 0 : _focusableElements4.length) - 1];
     var all = focusableElements;
+    var specifiedElement = selectorPrimaryFocus ? modalEl === null || modalEl === void 0 ? void 0 : modalEl.querySelector(selectorPrimaryFocus) : null;
     return {
       first: first,
       last: last,
-      all: all
+      all: all,
+      specifiedElement: specifiedElement
     };
-  }, [modalEl, query]);
+  }, [modalEl, query, selectorPrimaryFocus]);
   React.useEffect(function () {
     getFocusable();
   }, [getFocusable]);
@@ -80,6 +82,7 @@ var useFocus = function useFocus(modalRef) {
     firstElement: getFocusable().first,
     lastElement: getFocusable().last,
     allElements: getFocusable().all,
+    specifiedElement: getFocusable().specified,
     keyDownListener: handleKeyDown,
     getFocusable: getFocusable
   };

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

@@ -5,5 +5,5 @@ export function useRetrieveStepData({ stepsContext, stepNumber, introStep, inval
     invalid: boolean;
     shouldIncludeStep: boolean;
     secondaryLabel: string;
-    title: string;
+    title: React.ReactNode;
 }): void;

package/lib/global/js/hooks/useRetrieveStepData.js

@@ -22,7 +22,7 @@ var React = require('react');
  * @param {boolean} useResetCreateComponent.invalid
  * @param {boolean} useResetCreateComponent.shouldIncludeStep
  * @param {string} useResetCreateComponent.secondaryLabel
- * @param {string} useResetCreateComponent.title
+ * @param {React.ReactNode} useResetCreateComponent.title
  */
 var useRetrieveStepData = function useRetrieveStepData(_ref) {
   var stepsContext = _ref.stepsContext,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.39.0",
+  "version": "2.40.1-canary.6+51125a1f9",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -92,7 +92,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
-    "@carbon/ibm-products-styles": "^2.37.0",
+    "@carbon/ibm-products-styles": "^2.37.1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -116,5 +116,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "90e3441d8fdfc65023988bd734089c72fba0799b"
+  "gitHead": "51125a1f94bbfb83266c50033ca3ee9b695e7888"
 }

package/scss/components/CoachmarkStack/_coachmark-stack.scss

@@ -14,6 +14,7 @@
 @use '@carbon/react/scss/motion' as *;
 @use '@carbon/react/scss/colors' as *;
 @use '@carbon/react/scss/theme' as *;
+@use '@carbon/layout/scss/convert';
 @use '@carbon/styles/scss/components/button/tokens' as *;
 // Other Carbon settings if needed
 // TODO: @use '@carbon/styles/scss/grid';
@@ -43,7 +44,7 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
   &--is-mounted {
     bottom: 0;
     /* stylelint-disable-next-line carbon/motion-easing-use, carbon/motion-duration-use */
-    transition: transform $duration-moderate-02 motion(exit, productive);
+    transition: $duration-moderate-02 motion(exit, productive);
     @media (prefers-reduced-motion) {
       transition: none;
     }
@@ -60,7 +61,8 @@ $stack-home-class: #{c4p-settings.$pkg-prefix}--coachmark-stacked-home;
     bottom: 0;
     overflow: hidden;
     pointer-events: none;
-    transform: perspective(carbon--mini-units(18))
+    /* stylelint-disable-next-line function-no-unknown -- to-rem carbon replacement for rem */
+    transform: perspective(convert.to-rem(144px))
       translate3d(0, calc($spacing-09 * -1), calc($spacing-05 * -1));
     transform-origin: top center;
     visibility: visible;

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

@@ -20,8 +20,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   outline-offset: 0;
 }
 
-.#{$block-class}__condition-builder-condition__deletion-preview
-  .#{$block-class}__condition-builder-button:not(
+.#{$block-class}__condition__deletion-preview
+  .#{$block-class}__button:not(
     .#{$block-class}__statement-button,
     .#{$block-class}__connector-button
   ) {
@@ -29,8 +29,8 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   color: $tag-color-red;
 }
 
-.#{$block-class}__condition-builder-condition__deletion-preview
-  .#{$block-class}__condition-builder-button:not(
+.#{$block-class}__condition__deletion-preview
+  .#{$block-class}__button:not(
     .#{$block-class}__statement-button,
     .#{$block-class}__connector-button
   ):hover {

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

@@ -15,41 +15,41 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   @include type-style('body-01');
 }
 
-.#{$block-class}__condition-builder-item__content {
+.#{$block-class}__item__content {
   overflow: auto;
   min-width: $spacing-07 + $spacing-13;
   max-width: $spacing-13 + $spacing-13;
   max-height: $spacing-13 + $spacing-13 + $spacing-07;
 }
 
-.#{$block-class}__condition-builder-item__title {
+.#{$block-class}__item__title {
   @include type-style('heading-01');
 
   padding: $spacing-05;
 }
 
-.#{$block-class}__condition-builder-item-option__search {
+.#{$block-class}__item-option__search {
   padding-block-end: $spacing-05;
   padding-inline: $spacing-05;
 }
 
-.#{$block-class}__condition-builder-item-option__option {
+.#{$block-class}__item-option__option {
   height: 2rem;
   cursor: pointer;
   padding-inline: $spacing-05;
 }
 
-.#{$block-class}__condition-builder-item-option__option:hover {
+.#{$block-class}__item-option__option:hover {
   background-color: $layer-hover;
 }
 
-.#{$block-class}__condition-builder-item-option__option-content {
+.#{$block-class}__item-option__option-content {
   display: flex;
   height: 100%;
   align-items: center;
 }
 
-.#{$block-class}__condition-builder-item-option__option-label {
+.#{$block-class}__item-option__option-label {
   display: flex;
   overflow: hidden;
   align-items: center;
@@ -58,51 +58,51 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   white-space: nowrap;
 }
 
-.#{$block-class}__condition-builder-item-option
+.#{$block-class}__item-option
   > ul[aria-multiSelectable='true']
-  .#{$block-class}__condition-builder-item-option__option-label {
+  .#{$block-class}__item-option__option-label {
   justify-content: center;
 }
 
-.#{$block-class}__condition-builder-item-option__option:not(:first-of-type)
-  .#{$block-class}__condition-builder-item-option__option-content {
+.#{$block-class}__item-option__option:not(:first-of-type)
+  .#{$block-class}__item-option__option-content {
   border-block-start: 0.0625rem solid $border-subtle;
 }
 
-.#{$block-class}__condition-builder-item-option__option:hover
-  .#{$block-class}__condition-builder-item-option__option-content,
-.#{$block-class}__condition-builder-item-option__option[aria-selected='true']
-  .#{$block-class}__condition-builder-item-option__option-content,
-.#{$block-class}__condition-builder-item-option__option:hover
-  + .#{$block-class}__condition-builder-item-option__option
-  .#{$block-class}__condition-builder-item-option__option-content,
-.#{$block-class}__condition-builder-item-option__option[aria-selected='true']
-  + .#{$block-class}__condition-builder-item-option__option
-  .#{$block-class}__condition-builder-item-option__option-content {
+.#{$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}__condition-builder-item-option__option[aria-selected='true'] {
+.#{$block-class}__item-option__option[aria-selected='true'] {
   background-color: $layer-selected;
 }
 
-.#{$block-class}__condition-builder-item-option__option[aria-selected='true']:hover {
+.#{$block-class}__item-option__option[aria-selected='true']:hover {
   background-color: $layer-selected-hover;
 }
 
-.#{$block-class}__condition-builder-item-date,
-.#{$block-class}__condition-builder-item-text,
-.#{$block-class}__condition-builder-item-number,
-#{$block-class}__condition-builder-item-time {
+.#{$block-class}__item-date,
+.#{$block-class}__item-text,
+.#{$block-class}__item-number,
+#{$block-class}__item-time {
   padding-block-end: $spacing-05;
   padding-inline: $spacing-05;
 }
 
-.#{$block-class}__condition-builder-checkmark {
+.#{$block-class}__checkmark {
   margin-left: auto;
 }
 
-.#{$block-class}__condition-builder-button {
+.#{$block-class}__button {
   @include utilities.button-reset();
 
   display: inline-flex;
@@ -115,7 +115,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   padding-inline: $spacing-03;
   white-space: nowrap;
 }
-.#{$block-class}__condition-builder-button:hover {
+.#{$block-class}__button:hover {
   background-color: $layer-hover;
 }
 .#{$block-class}__condition-builder__group.hoveredConnector
@@ -125,7 +125,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   background-color: $layer-hover;
 }
 
-.#{$block-class}__condition-builder-button:focus {
+.#{$block-class}__button:focus {
   @include focus-outline.focus-outline('outline');
 
   content: '';
@@ -162,7 +162,7 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   }
 }
 
-.#{$block-class}__condition-builder-item-option__option:focus {
+.#{$block-class}__item-option__option:focus {
   @include focus-outline.focus-outline('outline');
 }
 // .#{$block-class}__tree {
@@ -174,10 +174,10 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
 //   }
 //   .#{$block-class}__condition-wrapper
 //     > :nth-child(1)
-//     .#{$block-class}__condition-builder-button,
+//     .#{$block-class}__button,
 //   .#{$block-class}__condition-wrapper
 //     > :nth-child(2)
-//     .#{$block-class}__condition-builder-button {
+//     .#{$block-class}__button {
 //     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
 //   }
 // }

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

@@ -14,5 +14,6 @@ $side-panel-sizes: (
   sm: 20rem,
   md: 30rem,
   lg: 40rem,
+  xl: 65rem,
   2xl: 40rem 75%,
 );

package/scss/components/StringFormatter/_string-formatter.scss

@@ -48,7 +48,7 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
   line-height: inherit;
 }
 
-.#{$popover-block-class} {
+.#{$block-class} .#{$popover-block-class} {
   max-width: $spacing-05;
   margin: 0 auto;
 }

package/scss/components/TagOverflow/_tag-overflow.scss

@@ -68,6 +68,11 @@ $block-class-modal: #{$block-class}-modal;
   max-width: $spacing-09;
 }
 
+.#{c4p-settings.$carbon-prefix}--popover
+  .#{c4p-settings.$carbon-prefix}--popover-content {
+  white-space: normal;
+}
+
 .#{$block-class-overflow} {
   display: inline-block;
   vertical-align: bottom;
@@ -139,8 +144,6 @@ $block-class-modal: #{$block-class}-modal;
     margin: 0;
     background-color: inherit;
     color: inherit;
-    text-overflow: ellipsis;
-    white-space: nowrap;
   }
 
   .#{$block-class-overflow}__tag

package/scss/components/_index-with-carbon.scss

@@ -77,3 +77,4 @@
 @use './FilterPanel/index-with-carbon' as *;
 @use './ConditionBuilder/index-with-carbon' as *;
 @use './GetStartedCard/index-with-carbon' as *;
+@use './Guidebanner/index-with-carbon' as *;

package/telemetry.yml

@@ -132,6 +132,7 @@ collect:
         - kind
         - label
         - labelText
+        - launcherButtonRef
         - legendText
         - link
         - links
@@ -795,6 +796,7 @@ collect:
         - documentationLinks
         - documentationLinksIconDescription
         - isInitiallyOpen
+        - webTerminalAriaLabel
         # React
         - key
         - ref