@carbon/ibm-products 2.43.2-canary.9 → 2.44.0-rc.1

package/lib/components/Tearsheet/TearsheetShell.js

@@ -29,7 +29,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
+var _excluded = ["actions", "ariaLabel", "children", "className", "closeIconDescription", "description", "hasCloseIcon", "headerActions", "influencer", "influencerPosition", "influencerWidth", "label", "navigation", "onClose", "open", "portalTarget", "selectorPrimaryFocus", "selectorsFloatingMenus", "size", "slug", "title", "verticalPosition", "launcherButtonRef"];
 
 // The block part of our conventional BEM class names (bc__E--M).
 var bc = "".concat(settings.pkg.prefix, "--tearsheet");
@@ -88,6 +88,8 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
     open = _ref.open,
     portalTargetIn = _ref.portalTarget,
     selectorPrimaryFocus = _ref.selectorPrimaryFocus,
+    _ref$selectorsFloatin = _ref.selectorsFloatingMenus,
+    selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
     size = _ref.size,
     slug = _ref.slug,
     title = _ref.title,
@@ -258,7 +260,7 @@ var TearsheetShell = /*#__PURE__*/React__default["default"].forwardRef(function
       onKeyDown: keyDownListener,
       preventCloseOnClickOutside: !isPassive,
       ref: modalRef,
-      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")],
+      selectorsFloatingMenus: [".".concat(carbonPrefix, "--overflow-menu-options"), ".".concat(carbonPrefix, "--tooltip"), '.flatpickr-calendar', ".".concat(bc, "__container")].concat(_rollupPluginBabelHelpers.toConsumableArray(selectorsFloatingMenus)),
       size: "sm"
     }), includeHeader && /*#__PURE__*/React__default["default"].createElement(react.ModalHeader, {
       className: cx__default["default"]("".concat(bc, "__header"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__header--with-close-icon"), effectiveHasCloseIcon), "".concat(bc, "__header--with-nav"), navigation)),
@@ -454,6 +456,18 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   /**@ts-ignore*/
   portalTarget: portalType,
+  /**
+   * Specify a CSS selector that matches the DOM element that should be
+   * focused when the Modal opens.
+   */
+  selectorPrimaryFocus: index["default"].string,
+  /**
+   * Specify the CSS selectors that match the floating menus.
+   *
+   * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+   */
+  /**@ts-ignore*/
+  selectorsFloatingMenus: index["default"].arrayOf(index["default"].string),
   /**
    * Specifies the width of the tearsheet, 'narrow' or 'wide'.
    */

package/lib/components/Toolbar/ToolbarButton.js

@@ -37,7 +37,7 @@ exports.ToolbarButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var Icon = renderIcon;
   return /*#__PURE__*/React__default["default"].createElement(react.IconButton, _rollupPluginBabelHelpers["extends"]({
-    align: ((_useContext = React.useContext(Toolbar.ToolbarContext)) === null || _useContext === void 0 ? void 0 : _useContext.vertical) && 'right'
+    align: (_useContext = React.useContext(Toolbar.ToolbarContext)) !== null && _useContext !== void 0 && _useContext.vertical ? 'right' : 'top'
   }, rest, {
     label: iconDescription,
     ref: ref,

package/lib/components/index.d.ts

@@ -50,7 +50,6 @@ export { Nav } from "./Nav";
 export { StringFormatter } from "./StringFormatter";
 export { UserAvatar } from "./UserAvatar";
 export { ScrollGradient } from "./ScrollGradient";
-export { StatusIndicator } from "./StatusIndicator";
 export { TagOverflow } from "./TagOverflow";
 export { ActionBar } from "./ActionBar";
 export { ConditionBuilder } from "./ConditionBuilder";
@@ -68,5 +67,6 @@ export { EditTearsheet, EditTearsheetForm } from "./EditTearsheet";
 export { Guidebanner, GuidebannerElement, GuidebannerElementButton, GuidebannerElementLink } from "./Guidebanner";
 export { InlineTip, InlineTipButton, InlineTipLink } from "./InlineTip";
 export { DescriptionList, DescriptionListBody, DescriptionListCell, DescriptionListRow } from "./DescriptionList";
+export { StatusIndicator, StatusIndicatorStep } from "./StatusIndicator";
 export { FilterPanel, FilterPanelAccordion, FilterPanelAccordionItem, FilterPanelCheckbox, FilterPanelCheckboxWithOverflow, FilterPanelGroup, FilterPanelLabel, FilterPanelSearch } from "./FilterPanel";
 export { FeatureFlags as unstable_FeatureFlags, useFeatureFlag as unstable_useFeatureFlag, useFeatureFlags as unstable_useFeatureFlags } from "./FeatureFlags";

package/lib/index.js

@@ -126,6 +126,7 @@ var StringFormatter = require('./components/StringFormatter/StringFormatter.js')
 var UserAvatar = require('./components/UserAvatar/UserAvatar.js');
 var ScrollGradient = require('./components/ScrollGradient/ScrollGradient.js');
 var StatusIndicator = require('./components/StatusIndicator/StatusIndicator.js');
+var StatusIndicatorStep = require('./components/StatusIndicator/StatusIndicatorStep.js');
 var TagOverflow = require('./components/TagOverflow/TagOverflow.js');
 var ActionBar = require('./components/ActionBar/ActionBar.js');
 var FilterPanel = require('./components/FilterPanel/FilterPanel.js');
@@ -535,6 +536,10 @@ Object.defineProperty(exports, 'StatusIndicator', {
 	enumerable: true,
 	get: function () { return StatusIndicator.StatusIndicator; }
 });
+Object.defineProperty(exports, 'StatusIndicatorStep', {
+	enumerable: true,
+	get: function () { return StatusIndicatorStep.StatusIndicatorStep; }
+});
 Object.defineProperty(exports, 'TagOverflow', {
 	enumerable: true,
 	get: function () { return TagOverflow.TagOverflow; }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.9+8a0d1a48a",
+  "version": "2.44.0-rc.1",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -26,7 +26,8 @@
     "lib",
     "scss",
     "flags.js",
-    "telemetry.yml"
+    "telemetry.yml",
+    ".playwright/INTERNAL_AVT_REPORT_DO_NOT_USE.json"
   ],
   "keywords": [
     "carbon",
@@ -80,7 +81,7 @@
     "fs-extra": "^11.2.0",
     "glob": "^10.3.10",
     "jest": "^29.7.0",
-    "jest-config-ibm-cloud-cognitive": "^1.2.0",
+    "jest-config-ibm-cloud-cognitive": "^1.3.0-rc.0",
     "jest-environment-jsdom": "^29.7.0",
     "namor": "^1.1.2",
     "npm-check-updates": "^16.14.12",
@@ -88,14 +89,14 @@
     "rimraf": "^5.0.5",
     "rollup": "^2.79.1",
     "rollup-plugin-strip-banner": "^3.0.0",
-    "sass": "^1.70.0",
+    "sass": "^1.77.2",
     "typescript-config-carbon": "^0.2.1",
     "yargs": "^17.7.2"
   },
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.20.0",
-    "@carbon/ibm-products-styles": "^2.39.1-canary.19+8a0d1a48a",
+    "@carbon/ibm-products-styles": "^2.40.0-rc.1",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -119,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "8a0d1a48aca63b9f5111c7c10abf0e385151a1ad"
+  "gitHead": "e080b44f87ff3170280f8f3149dd9af1eaa2748d"
 }

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

@@ -1,6 +1,6 @@
 @use '@carbon/react/scss/theme' as *;
 @use '@carbon/react/scss/spacing' as *;
-@use '@carbon/react/scss/motion';
+@use '@carbon/react/scss/motion' as *;
 @use '@carbon/styles/scss/components/tag' as *;
 @use '@carbon/styles/scss/utilities/focus-outline';
 @use '../../../global/styles/project-settings' as c4p-settings;
@@ -52,8 +52,16 @@ $block-class: #{c4p-settings.$pkg-prefix}--condition-builder;
   text-wrap: nowrap;
 }
 .#{$block-class}__group-preview {
+  height: 0;
+  opacity: 0;
+  pointer-events: none;
+  transition: all $duration-moderate-02 motion(exit, expressive);
+}
+.#{$block-class}__group-preview-animate {
+  height: auto;
   opacity: 0.5;
   pointer-events: none;
+  transition: all $duration-moderate-02 motion(exit, expressive);
 }
 .#{$block-class}__connector-disabled {
   display: flex;

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

@@ -212,7 +212,12 @@ $colors: (
     background-color: $layer;
   }
   .#{$block-class}__condition-wrapper > :nth-child(1) .#{$block-class}__button,
-  .#{$block-class}__condition-wrapper > :nth-child(2) .#{$block-class}__button {
+  .#{$block-class}__condition-wrapper
+    > :nth-child(2)
+    .#{$block-class}__button:not(
+      .#{$block-class}__add-button,
+      .#{$block-class}__add_condition_group
+    ) {
     /* stylelint-disable-next-line carbon/theme-token-use */
     box-shadow: inset 0 #{$spacing-01} 0 0 var(--#{$block-class}__condition-wrapper-color);
   }
@@ -229,3 +234,23 @@ $colors: (
   align-self: center;
   margin-left: auto;
 }
+.#{$block-class}__add_condition_group-wrapper {
+  z-index: -1;
+  margin-left: -50%;
+  opacity: 0;
+  pointer-events: none;
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
+  transition: all linear $duration-fast-02;
+}
+.#{$block-class}__add_condition_group-wrapper--show {
+  z-index: 0;
+  margin-left: 0;
+  opacity: 1;
+  pointer-events: all;
+  // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
+  transition: all linear $duration-fast-02;
+}
+.#{$block-class}__invalid-input {
+  display: flex;
+  color: $support-warning;
+}

package/scss/components/DataSpreadsheet/_data-spreadsheet.scss

@@ -201,6 +201,13 @@ $header-cell-background: $layer-accent-01;
       outline: 0;
     }
   }
+
+  .#{$block-class}__td-th.#{$block-class}__td_custom {
+    align-items: center;
+    justify-content: center;
+    gap: $spacing-03;
+  }
+
   .#{$block-class}__selection-area--element {
     position: absolute;
     z-index: 2;

package/scss/components/Datagrid/styles/_useInlineEdit.scss

@@ -80,6 +80,19 @@ $row-heights: (
   align-items: center;
 }
 
+.#{variables.$block-class}__inline-edit--outer-cell-checkbox-focus
+  .cds--checkbox-label::before {
+  outline: $spacing-01 solid $focus;
+  outline-offset: 1px;
+}
+
+.#{variables.$block-class}__inline-edit--outer-cell-checkbox {
+  display: flex;
+  height: -webkit-fill-available;
+  justify-content: center;
+  padding-inline: $spacing-05;
+}
+
 .#{variables.$block-class}__static--outer-cell {
   display: flex;
   height: -webkit-fill-available;

package/scss/components/StatusIcon/_status-icon.scss

@@ -73,7 +73,7 @@ $themes: ('light', 'dark');
 
 $block-class: #{$pkg-prefix}--status-icon;
 
-@function --clr($name, $theme: light) {
+@function carbon-clr($name, $theme: light) {
   // stylelint-disable-next-line carbon/theme-token-use
   $color: map-get(map-get($colors, $name), $theme);
   @return $color;
@@ -125,13 +125,13 @@ $block-class: #{$pkg-prefix}--status-icon;
           // stylelint-disable-next-line carbon/motion-duration-use, carbon/motion-easing-use
           animation: rotating 8000ms infinite linear;
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          fill: carbon-clr($icon, $theme);
         } @else if $icon == running {
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          fill: carbon-clr($icon, $theme);
         } @else {
           // stylelint-disable-next-line carbon/theme-token-use
-          fill: --clr($icon, $theme);
+          fill: carbon-clr($icon, $theme);
           @media (prefers-reduced-motion) {
             .#{$block-class}--#{$theme}.#{$block-class}--#{$theme-key}-in-progress {
               animation: none;

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

@@ -79,7 +79,7 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
 .#{$block-class}
   .#{$popover-block-class}--top-right
   .#{$popover-block-class}-caret {
-  /* stylelint-disable-next-line declaration-no-important */
+  /* stylelint-disable-next-line */
   inset-block-start: -1px !important;
 }
 
@@ -92,6 +92,6 @@ $popover-block-class: #{c4p-settings.$carbon-prefix}--popover;
 .#{$block-class}
   .#{$popover-block-class}--bottom-right
   .#{$popover-block-class}-caret {
-  /* stylelint-disable-next-line declaration-no-important */
+  /* stylelint-disable-next-line */
   inset-block-end: -1px !important;
 }

package/scss/components/UserProfileImage/_user-profile-image.scss

@@ -44,7 +44,7 @@ $themes: (
 
 $theme-keys: map-keys($themes);
 
-@function --get-background-color($color, $key, $contrast-key) {
+@function carbon-get-background-color($color, $key, $contrast-key) {
   @return map-get(
     $carbon-colors,
     #{$color}#{map-get(map-get($themes, $key), #{$contrast-key}-contrast)}
@@ -59,7 +59,11 @@ $theme-keys: map-keys($themes);
     @each $contrast-key in $theme-keys {
       .#{$block-class}--#{$key}.#{$block-class}--#{$contrast-key}-#{$color} {
         // stylelint-disable-next-line carbon/theme-token-use
-        background-color: --get-background-color($color, $key, $contrast-key);
+        background-color: carbon-get-background-color(
+          $color,
+          $key,
+          $contrast-key
+        );
       }
     }
   }

package/telemetry.yml

@@ -49,6 +49,7 @@ collect:
         - closeIconDescription
         - collapseButtonLabel
         - collapsible
+        - column
         - columnInputPlaceholder
         - columns
         - condition
@@ -100,6 +101,7 @@ collect:
         - formDescription
         - formTitle
         - fullHeightDatagrid
+        - getActionsState
         - getConditionState
         - getFilterFlyoutProps
         - getOptions
@@ -121,6 +123,7 @@ collect:
         - handleResize
         - hasActions
         - hasCloseIcon
+        - hasCustomRowHeader
         - hasFieldset
         - headerGroups
         - HeaderRow
@@ -262,10 +265,13 @@ collect:
         - radio
         - reactTableFiltersState
         - renderIcon
+        - renderRowHeader
+        - renderRowHeaderDirection
         - resetToDefaultLabel
         - resizerAriaLabel
         - rightAlign
         - row
+        - rowActions
         - rows
         - rowSize
         - score
@@ -284,10 +290,12 @@ collect:
         - selectAllLabel
         - selectAllToggle
         - selected
+        - selectedHeaderReorderActive
         - selectedOption
         - selectionAreas
         - selectorPageContent
         - selectorPrimaryFocus
+        - selectorsFloatingMenus
         - sequence
         - setActiveCellCoordinates
         - setAllFilters
@@ -301,6 +309,7 @@ collect:
         - setMouseOverRowIndex
         - setMultiSelection
         - setPopoverOpen
+        - setSelectedHeaderReorderActive
         - setSelectionAreaData
         - setSelectionAreas
         - showAllTagsLabel
@@ -520,14 +529,14 @@ collect:
         - enableSubGroup
         # ConditionBuilderButton
         - hideLabel
+        - isInvalid
         - onBlur
         - onFocus
         - onMouseEnter
         - onMouseLeave
         - tooltipAlign
+        - wrapperClassName
         - wrapperProps
-        # ConditionBuilderContent
-        - getActionsState
         # ConditionBuilderItem
         - popOverClassName
         # ConditionConnector
@@ -748,7 +757,6 @@ collect:
         - warnText
         # OverflowCheckboxes
         - applyFilters
-        - column
         - components
         - filtersState
         - setFiltersState
@@ -779,6 +787,7 @@ collect:
         - inputInvalidText
         - inputLabelText
         - inputPlaceholderText
+        - primaryDangerDescription
         - resourceName
         - textConfirmation
         # RowSizeDropdown
@@ -1010,6 +1019,9 @@ collect:
         # General - primaryButtonPlacement
         - bottom
         - top
+        # General - renderRowHeaderDirection
+        - left
+        - right
         # General - rowSize
         - lg
         - md

package/es/components/ConditionBuilder/utils/checkForHoldingKey.d.ts

@@ -1 +0,0 @@
-export function checkForHoldingKey(evt: any, key: any): any;

package/es/components/ConditionBuilder/utils/checkForHoldingKey.js

@@ -1,16 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2024
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-var checkForHoldingKey = function checkForHoldingKey(evt, key) {
-  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
-  if (key === 'cmd') {
-    return evt.metaKey || evt.ctrlKey;
-  }
-  return evt[key];
-};
-
-export { checkForHoldingKey };

package/lib/components/ConditionBuilder/utils/checkForHoldingKey.d.ts

@@ -1 +0,0 @@
-export function checkForHoldingKey(evt: any, key: any): any;

package/lib/components/ConditionBuilder/utils/checkForHoldingKey.js

@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2024
- *
- * 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';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var checkForHoldingKey = function checkForHoldingKey(evt, key) {
-  // possible key inputs: altKey,ctrlKey,metaKey,shiftKey
-  if (key === 'cmd') {
-    return evt.metaKey || evt.ctrlKey;
-  }
-  return evt[key];
-};
-
-exports.checkForHoldingKey = checkForHoldingKey;