@carbon/ibm-products 2.43.2-canary.301 → 2.43.2-canary.303

package/es/components/Tearsheet/TearsheetShell.js

@@ -13,6 +13,7 @@ import cx from 'classnames';
 import { pkg } from '../../settings.js';
 import pconsole from '../../global/js/utils/pconsole.js';
 import { getNodeTextContent } from '../../global/js/utils/getNodeTextContent.js';
+import { deprecateProp } from '../../global/js/utils/props-helper.js';
 import { Button, usePrefix, unstable_FeatureFlags, ComposedModal, ModalHeader, Layer } from '@carbon/react';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import { Wrap } from '../../global/js/utils/Wrap.js';
@@ -20,7 +21,7 @@ import { usePortalTarget } from '../../global/js/hooks/usePortalTarget.js';
 import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
-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"];
+var _excluded = ["actions", "aiLabel", "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(pkg.prefix, "--tearsheet");
@@ -63,6 +64,7 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
  * */
 var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
+    aiLabel = _ref.aiLabel,
     ariaLabel = _ref.ariaLabel,
     children = _ref.children,
     className = _ref.className,
@@ -82,7 +84,7 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _ref$selectorsFloatin = _ref.selectorsFloatingMenus,
     selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
     size = _ref.size,
-    slug = _ref.slug,
+    deprecated_slug = _ref.slug,
     title = _ref.title,
     verticalPosition = _ref.verticalPosition,
     launcherButtonRef = _ref.launcherButtonRef,
@@ -263,10 +265,10 @@ var TearsheetShell = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       }
     }, /*#__PURE__*/React__default.createElement(ComposedModal, _extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent(title),
-      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      className: cx(bc, className, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
-      slug: slug,
+      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), deprecated_slug), "".concat(bc, "--has-ai-label"), aiLabel), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      slug: aiLabel || deprecated_slug,
       style: setScaleValues(),
       containerClassName: cx("".concat(bc, "__container"), _defineProperty(_defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
       onClose: onClose,
@@ -344,6 +346,10 @@ var portalType = typeof Element === 'undefined' ? PropTypes.object :
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 PropTypes.instanceOf(Element);
 var deprecatedProps = {
+  /**
+   *  @deprecated Property replaced by `aiLabel`
+   */
+  slug: deprecateProp(PropTypes.node, 'Property replaced by `aiLabel`'),
   /**
    * **Deprecated**
    *
@@ -388,6 +394,11 @@ TearsheetShell.propTypes = _objectSpread2({
     /**@ts-ignore*/
     onClick: Button.propTypes.onClick
   }))),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency,
+   * accountability, and explainability at the UI level.
+   */
+  aiLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**
    * The main content of the tearsheet.
    */
@@ -494,10 +505,6 @@ TearsheetShell.propTypes = _objectSpread2({
    */
   /**@ts-ignore*/
   size: PropTypes.oneOf(['narrow', 'wide']).isRequired,
-  /**
-   *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
-   */
-  slug: PropTypes.node,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

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

@@ -10,6 +10,11 @@ import PropTypes from 'prop-types';
 import { type ButtonProps } from '@carbon/react';
 interface TearsheetShellProps extends PropsWithChildren {
     actions?: ButtonProps<'button'>[];
+    /**
+     * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency,
+     * accountability, and explainability at the UI level.
+     */
+    aiLabel?: ReactNode;
     ariaLabel?: string;
     /**
      * An optional class or classes to be added to the outermost element.
@@ -96,15 +101,15 @@ interface TearsheetShellProps extends PropsWithChildren {
      * Specifies the width of the tearsheet, 'narrow' or 'wide'.
      */
     size: 'narrow' | 'wide';
-    /**
-     *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
-     */
-    slug?: ReactNode;
     /**
      * The main title of the tearsheet, displayed in the header area.
      */
     title?: ReactNode;
     verticalPosition?: 'normal' | 'lower';
+    /**
+     * @deprecated Property replaced by `aiLabel`
+     */
+    slug?: ReactNode;
 }
 export type CloseIconDescriptionTypes = {
     hasCloseIcon?: false;
@@ -126,6 +131,10 @@ export declare const tearsheetHasCloseIcon: (actions: any, hasCloseIcon: any) =>
 export declare const TearsheetShell: React.ForwardRefExoticComponent<(TearsheetShellProps & CloseIconDescriptionTypes) & React.RefAttributes<HTMLDivElement>>;
 export declare const portalType: PropTypes.Requireable<object>;
 export declare const deprecatedProps: {
+    /**
+     *  @deprecated Property replaced by `aiLabel`
+     */
+    slug: (props: any, propName: any, comp: any, loc: any, propFullName: any, secret: any) => any;
     /**
      * **Deprecated**
      *

package/lib/components/Tearsheet/TearsheetShell.js

@@ -15,6 +15,7 @@ var cx = require('classnames');
 var settings = require('../../settings.js');
 var pconsole = require('../../global/js/utils/pconsole.js');
 var getNodeTextContent = require('../../global/js/utils/getNodeTextContent.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 var react = require('@carbon/react');
 var ActionSet = require('../ActionSet/ActionSet.js');
 var Wrap = require('../../global/js/utils/Wrap.js');
@@ -22,7 +23,7 @@ var usePortalTarget = require('../../global/js/hooks/usePortalTarget.js');
 var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
-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"];
+var _excluded = ["actions", "aiLabel", "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");
@@ -65,6 +66,7 @@ var tearsheetHasCloseIcon = function tearsheetHasCloseIcon(actions, hasCloseIcon
  * */
 var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actions = _ref.actions,
+    aiLabel = _ref.aiLabel,
     ariaLabel = _ref.ariaLabel,
     children = _ref.children,
     className = _ref.className,
@@ -84,7 +86,7 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$selectorsFloatin = _ref.selectorsFloatingMenus,
     selectorsFloatingMenus = _ref$selectorsFloatin === void 0 ? [] : _ref$selectorsFloatin,
     size = _ref.size,
-    slug = _ref.slug,
+    deprecated_slug = _ref.slug,
     title = _ref.title,
     verticalPosition = _ref.verticalPosition,
     launcherButtonRef = _ref.launcherButtonRef,
@@ -265,10 +267,10 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       }
     }, /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
       "aria-label": ariaLabel || getNodeTextContent.getNodeTextContent(title),
-      className: cx(bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
+      className: cx(bc, className, _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "--stacked-").concat(position, "-of-").concat(depth),
       // Don't apply this on the initial open of a single tearsheet.
-      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), slug), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
-      slug: slug,
+      depth > 1 || depth === 1 && ((_prevDepth$current = prevDepth === null || prevDepth === void 0 ? void 0 : prevDepth.current) !== null && _prevDepth$current !== void 0 ? _prevDepth$current : 0) > 1), "".concat(bc, "--wide"), wide), "".concat(bc, "--narrow"), !wide), "".concat(bc, "--has-slug"), deprecated_slug), "".concat(bc, "--has-ai-label"), aiLabel), "".concat(bc, "--has-close"), effectiveHasCloseIcon)),
+      slug: aiLabel || deprecated_slug,
       style: setScaleValues(),
       containerClassName: cx("".concat(bc, "__container"), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(bc, "__container--lower"), verticalPosition === 'lower'), "".concat(bc, "__container--mixed-size-stacking"), !areAllSameSizeVariant())),
       onClose: onClose,
@@ -346,6 +348,10 @@ var portalType = typeof Element === 'undefined' ? index.default.object :
 // eslint-disable-next-line ssr-friendly/no-dom-globals-in-module-scope
 index.default.instanceOf(Element);
 var deprecatedProps = {
+  /**
+   *  @deprecated Property replaced by `aiLabel`
+   */
+  slug: propsHelper.deprecateProp(index.default.node, 'Property replaced by `aiLabel`'),
   /**
    * **Deprecated**
    *
@@ -390,6 +396,11 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
     /**@ts-ignore*/
     onClick: react.Button.propTypes.onClick
   }))),
+  /**
+   * Optional prop that is intended for any scenario where something is being generated by AI to reinforce AI transparency,
+   * accountability, and explainability at the UI level.
+   */
+  aiLabel: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * The main content of the tearsheet.
    */
@@ -496,10 +507,6 @@ TearsheetShell.propTypes = _rollupPluginBabelHelpers.objectSpread2({
    */
   /**@ts-ignore*/
   size: index.default.oneOf(['narrow', 'wide']).isRequired,
-  /**
-   *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
-   */
-  slug: index.default.node,
   /**
    * The main title of the tearsheet, displayed in the header area.
    */

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.301+43db2b7f7",
+  "version": "2.43.2-canary.303+2311bdb74",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.22.0",
-    "@carbon/ibm-products-styles": "^2.48.0-rc.0",
+    "@carbon/ibm-products-styles": "^2.39.1-canary.313+2311bdb74",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,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": "43db2b7f7785b5969b7bbd51773da6f47399b943"
+  "gitHead": "2311bdb7477e72a6cd4d7f915f6dc754874b7375"
 }

package/scss/components/Datagrid/styles/_datagrid.scss

@@ -446,6 +446,8 @@
 }
 
 .#{$block-class}__resizableColumn:hover {
+  background-color: $background-selected-hover;
+
   .#{$block-class}__resizer {
     border-right: $spacing-01 solid $border-strong-01;
     background-color: $background-selected-hover;

package/scss/components/Tearsheet/_tearsheet.scss

@@ -110,6 +110,8 @@ $motion-duration: $duration-moderate-02;
   }
 
   &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-slug
+    .#{$block-class}__container,
+  &.#{$block-class}.#{$block-class}.#{$block-class}.#{$block-class}--has-ai-label
     .#{$block-class}__container {
     border: 1px solid transparent;
     border-bottom: 0;
@@ -276,11 +278,15 @@ $motion-duration: $duration-moderate-02;
 
   &.#{$block-class}--wide
     .#{$block-class}__header.#{$block-class}__header--with-close-icon,
-  &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header {
+  &.#{$block-class}--has-slug .#{$block-class}__header.#{$block-class}__header,
+  &.#{$block-class}--has-ai-label
+    .#{$block-class}__header.#{$block-class}__header {
     padding-inline-end: $spacing-11;
   }
 
   &.#{$block-class}--wide.#{$block-class}--has-slug
+    .#{$block-class}__header.#{$block-class}__header--with-close-icon,
+  &.#{$block-class}--wide.#{$block-class}--has-ai-label
     .#{$block-class}__header.#{$block-class}__header--with-close-icon {
     /* spacing 11 plus additional space for slug/close */
     /* stylelint-disable-next-line carbon/layout-token-use */
@@ -362,7 +368,8 @@ $motion-duration: $duration-moderate-02;
     flex-grow: 1;
   }
 
-  &.#{$block-class}--has-slug .#{$block-class}__content {
+  &.#{$block-class}--has-slug .#{$block-class}__content,
+  &.#{$block-class}--has-ai-label .#{$block-class}__content {
     @include utilities.ai-popover-gradient('default', 0);
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow;
@@ -418,12 +425,15 @@ $motion-duration: $duration-moderate-02;
     background: $background;
   }
 
-  &.#{$block-class}--has-slug {
+  &.#{$block-class}--has-slug,
+  &.#{$block-class}--has-ai-label {
     /* stylelint-disable-next-line carbon/theme-token-use */
     --overlay-color: #{$ai-overlay};
   }
 
   &.#{$block-class}--has-slug:not(.#{$block-class}--has-close)
+    .#{$carbon-prefix}--slug,
+  &.#{$block-class}--has-ai-label:not(.#{$block-class}--has-close)
     .#{$carbon-prefix}--slug {
     inset-inline-end: 0;
     margin-block: 6px;