@carbon/ibm-products 2.43.2-canary.300 → 2.43.2-canary.302

package/lib/components/Datagrid/useRowExpander.js

@@ -18,8 +18,8 @@ var useFocusRowExpander = require('./useFocusRowExpander.js');
 
 var blockClass = "".concat(settings.pkg.prefix, "--datagrid");
 var useRowExpander = function useRowExpander(hooks) {
-  var tempState = React.useRef();
-  var lastExpandedRowIndex = React.useRef();
+  var tempState = React.useRef(undefined);
+  var lastExpandedRowIndex = React.useRef(undefined);
   var useInstance = function useInstance(instance) {
     tempState.current = instance;
   };

package/lib/components/Datagrid/useStickyColumn.js

@@ -20,9 +20,9 @@ var styleClassPrefix = "".concat(blockClass, "__right-sticky-column");
 var leftStickyStyleClassPrefix = "".concat(blockClass, "__left-sticky-column");
 var OFFSET_SCROLL_CLASS = "".concat(styleClassPrefix, "-offset-scroll");
 var useStickyColumn = function useStickyColumn(hooks) {
-  var tableBodyRef = React.useRef();
-  var stickyHeaderCellRef = React.useRef();
-  var _useState = React.useState(),
+  var tableBodyRef = React.useRef(undefined);
+  var stickyHeaderCellRef = React.useRef(undefined);
+  var _useState = React.useState(undefined),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     windowSize = _useState2[0],
     setWindowSize = _useState2[1];

package/lib/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js

@@ -53,7 +53,7 @@ exports.FilterPanelCheckboxWithOverflow = /*#__PURE__*/React.forwardRef(function
     setShowMenuButton = _useState4[1];
   // Destructure overflow menu properties.
   var other = _rollupPluginBabelHelpers.extends({}, (_rollupPluginBabelHelpers.objectDestructuringEmpty(overflowMenuProps), overflowMenuProps));
-  var backupRef = React.useRef();
+  var backupRef = React.useRef(undefined);
   var localRef = ref || backupRef;
   var setHideButton = function setHideButton(activeElement) {
     if (!menuIsOpen && !localRef.current.contains(activeElement)) {

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -92,11 +92,11 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     _ref$skipButtonLabel = _ref.skipButtonLabel,
     skipButtonLabel = _ref$skipButtonLabel === void 0 ? defaults.skipButtonLabel : _ref$skipButtonLabel,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var backupRef = React.useRef();
+  var backupRef = React.useRef(undefined);
   var _forwardedRef = ref || backupRef;
-  var scrollRef = React.useRef();
-  var startButtonRef = React.useRef();
-  var nextButtonRef = React.useRef();
+  var scrollRef = React.useRef(undefined);
+  var startButtonRef = React.useRef(undefined);
+  var nextButtonRef = React.useRef(undefined);
   var _useState = React.useState(null),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isVisibleClass = _useState2[0],

package/lib/components/ScrollGradient/ScrollGradient.js

@@ -52,8 +52,8 @@ exports.ScrollGradient = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     horizontalPosition = _useState4[0],
     setHorizontalPosition = _useState4[1];
-  var scrollContainer = React.useRef();
-  var contentChildrenContainer = React.useRef();
+  var scrollContainer = React.useRef(undefined);
+  var contentChildrenContainer = React.useRef(undefined);
   var updateScrollState = lodash.throttle(function () {
     var updatedVerticalVal = constants.getScrollState(scrollContainer.current, constants.ScrollDirection.Y);
     var updatedHorizontalVal = constants.getScrollState(scrollContainer.current, constants.ScrollDirection.X);

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -41,7 +41,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     jsonData = _useState2[0],
     setJsonData = _useState2[1];
-  var animRef = React.useRef();
+  var animRef = React.useRef(undefined);
   var backupRef = React.useRef(null);
   var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
   var localRefValue = localRef.current;

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,
@@ -92,7 +94,7 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var carbonPrefix = react.usePrefix();
   var bcModalHeader = "".concat(carbonPrefix, "--modal-header");
   var renderPortalUse = usePortalTarget.usePortalTarget(portalTargetIn);
-  var localRef = React.useRef();
+  var localRef = React.useRef(undefined);
   var resizer = React.useRef(null);
   var modalBodyRef = React.useRef(null);
   var modalRef = ref || localRef;
@@ -123,7 +125,7 @@ var TearsheetShell = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     setPosition = _useState4[1];
 
   // Keep a record of the previous value of depth.
-  var prevDepth = React.useRef();
+  var prevDepth = React.useRef(undefined);
   React.useEffect(function () {
     prevDepth.current = depth;
   });
@@ -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/lib/components/Toolbar/Toolbar.js

@@ -27,7 +27,7 @@ exports.Toolbar = /*#__PURE__*/React.forwardRef(function (_ref, r) {
     className = _ref.className,
     vertical = _ref.vertical,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
-  var focusableElements = React.useRef();
+  var focusableElements = React.useRef(undefined);
   var getFocusableElements$1 = React.useCallback(function () {
     return focusableElements.current;
   }, [focusableElements]);

package/lib/components/TruncatedList/TruncatedList.js

@@ -69,7 +69,7 @@ exports.TruncatedList = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     listHeight = _useState4[0],
     setListHeight = _useState4[1];
-  var listRef = React.useRef();
+  var listRef = React.useRef(undefined);
   var handleToggle = function handleToggle() {
     setIsCollapsed(function (prev) {
       return !prev;

package/lib/global/js/hooks/usePreviousValue.js

@@ -15,7 +15,7 @@ var React = require('react');
  * @returns {T | undefined} - The previous value of the same type, or undefined if there is none
  */
 var usePreviousValue = function usePreviousValue(value) {
-  var ref = React.useRef();
+  var ref = React.useRef(undefined);
   React.useEffect(function () {
     ref.current = value;
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.300+d3f08bcd0",
+  "version": "2.43.2-canary.302+5c0f2adf5",
   "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.39.1-canary.310+d3f08bcd0",
+    "@carbon/ibm-products-styles": "^2.39.1-canary.312+5c0f2adf5",
     "@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": "d3f08bcd0b479a84e69fc29dfe03a931618168a7"
+  "gitHead": "5c0f2adf55e6c9c7f081dab72ab711b611593476"
 }

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;