@carbon/ibm-products 2.43.2-canary.7 → 2.44.0-rc.0

package/lib/components/Tearsheet/TearsheetNarrow.d.ts

@@ -64,6 +64,17 @@ interface TearsheetNarrowBaseProps extends PropsWithChildren {
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
+    selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * The main title of the tearsheet, displayed in the header area.
      */

package/lib/components/Tearsheet/TearsheetNarrow.js

@@ -156,6 +156,18 @@ exports.TearsheetNarrow.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   /**@ts-ignore */
   portalTarget: TearsheetShell.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),
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/lib/components/Tearsheet/TearsheetShell.d.ts

@@ -81,7 +81,17 @@ interface TearsheetShellProps extends PropsWithChildren {
      * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
      */
     portalTarget?: ReactNode;
+    /**
+     * Specify a CSS selector that matches the DOM element that should be
+     * focused when the Modal opens.
+     */
     selectorPrimaryFocus?: string;
+    /**
+     * Specify the CSS selectors that match the floating menus.
+     *
+     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
+     */
+    selectorsFloatingMenus?: string[];
     /**
      * Specifies the width of the tearsheet, 'narrow' or 'wide'.
      */

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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.7+b2a413a06",
+  "version": "2.44.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -80,7 +80,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 +88,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.0",
+    "@carbon/ibm-products-styles": "^2.40.0-rc.0",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -119,5 +119,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "b2a413a067c999839c9481e3fa7d1fd8b1e3d2ff"
+  "gitHead": "9546245eaa127386e9dc198845505396ca31298d"
 }

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

@@ -98,6 +98,7 @@ $header-cell-background: $layer-accent-01;
     position: sticky;
     z-index: 4;
     left: 0;
+    background-color: $background;
   }
   .#{$block-class}__td-th.#{$block-class}__td {
     @include font-family.font-weight('semibold');

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
@@ -266,6 +268,7 @@ collect:
         - resizerAriaLabel
         - rightAlign
         - row
+        - rowActions
         - rows
         - rowSize
         - score
@@ -284,10 +287,12 @@ collect:
         - selectAllLabel
         - selectAllToggle
         - selected
+        - selectedHeaderReorderActive
         - selectedOption
         - selectionAreas
         - selectorPageContent
         - selectorPrimaryFocus
+        - selectorsFloatingMenus
         - sequence
         - setActiveCellCoordinates
         - setAllFilters
@@ -301,6 +306,7 @@ collect:
         - setMouseOverRowIndex
         - setMultiSelection
         - setPopoverOpen
+        - setSelectedHeaderReorderActive
         - setSelectionAreaData
         - setSelectionAreas
         - showAllTagsLabel
@@ -520,14 +526,14 @@ collect:
         - enableSubGroup
         # ConditionBuilderButton
         - hideLabel
+        - isInvalid
         - onBlur
         - onFocus
         - onMouseEnter
         - onMouseLeave
         - tooltipAlign
+        - wrapperClassName
         - wrapperProps
-        # ConditionBuilderContent
-        - getActionsState
         # ConditionBuilderItem
         - popOverClassName
         # ConditionConnector
@@ -748,7 +754,6 @@ collect:
         - warnText
         # OverflowCheckboxes
         - applyFilters
-        - column
         - components
         - filtersState
         - setFiltersState

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;