@carbon/ibm-products 2.43.2-canary.295 → 2.43.2-canary.298

package/es/components/SidePanel/SidePanel.js

@@ -24,7 +24,7 @@ import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMoti
 import { useFocus, getSpecificElement } from '../../global/js/hooks/useFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 
-var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
+var _excluded = ["actionToolbarButtons", "actions", "aiLabel", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
   _excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
 var blockClass = "".concat(pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
@@ -47,6 +47,7 @@ var defaults = {
 var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
+    aiLabel = _ref.aiLabel,
     _ref$animateTitle = _ref.animateTitle,
     animateTitle = _ref$animateTitle === void 0 ? defaults.animateTitle : _ref$animateTitle,
     children = _ref.children,
@@ -334,7 +335,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   }, [animationComplete, firstElement, open, selectorPrimaryFocus, sidePanelRef, slideIn]);
   var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
-  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
+  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-ai-label"), !!aiLabel || !!slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
   var renderTitle = function renderTitle() {
     return /*#__PURE__*/React__default.createElement("div", {
       className: cx("".concat(blockClass, "__title"), _defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
@@ -350,13 +351,23 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }, title));
   };
   var renderHeader = function renderHeader() {
-    var _slug$type;
-    var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
-    var normalizedSlug;
+    var _slug$type, _aiLabel$type;
+    var aiLabelCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
+    var normalizedAILabel;
+    /**
+     * slug is deprecated
+     * can remove this condition in future release
+     */
     if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
-      normalizedSlug = /*#__PURE__*/React__default.cloneElement(slug, {
+      normalizedAILabel = /*#__PURE__*/React__default.cloneElement(slug, {
         // slug size is sm unless actions and size > md
-        size: slugCloseSize
+        size: aiLabelCloseSize
+      });
+    }
+    if (aiLabel && ((_aiLabel$type = aiLabel['type']) === null || _aiLabel$type === void 0 ? void 0 : _aiLabel$type.displayName) === 'AILabel') {
+      normalizedAILabel = /*#__PURE__*/React__default.cloneElement(aiLabel, {
+        // aiLabel size is sm unless actions and size > md
+        size: aiLabelCloseSize
       });
     }
     return /*#__PURE__*/React__default.createElement("div", {
@@ -364,7 +375,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       ref: headerRef
     }, currentStep > 0 && /*#__PURE__*/React__default.createElement(Button, {
       kind: "ghost",
-      size: slugCloseSize,
+      size: aiLabelCloseSize,
       disabled: false,
       renderIcon: function renderIcon(props) {
         return /*#__PURE__*/React__default.createElement(ArrowLeft, _extends({
@@ -378,8 +389,8 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__label-text"),
       ref: labelTextRef
     }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React__default.createElement("div", {
-      className: "".concat(blockClass, "__slug-and-close")
-    }, normalizedSlug, /*#__PURE__*/React__default.createElement(IconButton, {
+      className: "".concat(blockClass, "__ai-label-and-close")
+    }, normalizedAILabel, /*#__PURE__*/React__default.createElement(IconButton, {
       className: "".concat(blockClass, "__close-button"),
       label: closeIconDescription,
       onClick: onRequestClose,
@@ -477,7 +488,14 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
 // Return a placeholder if not released and not enabled by feature flag
 SidePanel = pkg.checkComponentEnabled(SidePanel, componentName);
-SidePanel.propTypes = {
+var deprecatedProps = {
+  /**
+   * **deprecated**
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+   */
+  slug: PropTypes.node
+};
+SidePanel.propTypes = _objectSpread2({
   /**
    * Sets the action toolbar buttons
    */
@@ -614,10 +632,6 @@ SidePanel.propTypes = {
    */
   /**@ts-ignore*/
   slideIn: PropTypes.bool,
-  /**
-   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
-   */
-  slug: PropTypes.node,
   /**
    * Sets the subtitle text
    */
@@ -630,7 +644,7 @@ SidePanel.propTypes = {
     var labelText = _ref7.labelText;
     return labelText;
   })
-};
+}, deprecatedProps);
 SidePanel.displayName = componentName;
 
 export { SidePanel };

package/lib/components/Datagrid/Datagrid/DatagridExpandedRow.js

@@ -51,8 +51,10 @@ var DatagridExpandedRow = function DatagridExpandedRow(ExpandedRowContentCompone
       className: "".concat(blockClass, "__expanded-row-cell-wrapper")
     }, /*#__PURE__*/React.createElement("div", {
       className: "".concat(blockClass, "__expanded-row-content"),
-      style: {
-        height: expandedContentHeight && expandedContentHeight
+      ref: function ref(el) {
+        if (el && el.style && expandedContentHeight) {
+          el.style.height = "".concat(expandedContentHeight, "px");
+        }
       }
     }, /*#__PURE__*/React.createElement(ExpandedRowContentComponent, _rollupPluginBabelHelpers.extends({
       key: key

package/lib/components/SidePanel/SidePanel.d.ts

@@ -110,9 +110,14 @@ type SidePanelBaseProps = {
      */
     slideIn?: boolean;
     /**
+     * @deprecated please use the `aiLabel` prop
      *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
      */
     slug?: ReactNode;
+    /**
+     * 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;
     /**
      * Sets the subtitle text
      */

package/lib/components/SidePanel/SidePanel.js

@@ -26,7 +26,7 @@ var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMo
 var useFocus = require('../../global/js/hooks/useFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 
-var _excluded = ["actionToolbarButtons", "actions", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
+var _excluded = ["actionToolbarButtons", "actions", "aiLabel", "animateTitle", "children", "className", "closeIconDescription", "condensedActions", "currentStep", "id", "includeOverlay", "labelText", "navigationBackIconDescription", "onNavigationBack", "onRequestClose", "onUnmount", "open", "placement", "preventCloseOnClickOutside", "selectorPageContent", "selectorPrimaryFocus", "size", "slideIn", "slug", "subtitle", "title", "launcherButtonRef"],
   _excluded2 = ["label", "kind", "hasIconOnly", "icon", "renderIcon", "tooltipPosition", "tooltipAlignment", "leading", "disabled", "className", "onClick"];
 var blockClass = "".concat(settings.pkg.prefix, "--side-panel");
 var componentName = 'SidePanel';
@@ -49,6 +49,7 @@ var defaults = {
 exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var actionToolbarButtons = _ref.actionToolbarButtons,
     actions = _ref.actions,
+    aiLabel = _ref.aiLabel,
     _ref$animateTitle = _ref.animateTitle,
     animateTitle = _ref$animateTitle === void 0 ? defaults.animateTitle : _ref$animateTitle,
     children = _ref.children,
@@ -336,7 +337,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }
   }, [animationComplete, firstElement, open, selectorPrimaryFocus, sidePanelRef, slideIn]);
   var primaryActionContainerClassNames = cx(["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
-  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-slug"), slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
+  var mainPanelClassNames = cx([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--right-placement"), placement === 'right'), "".concat(blockClass, "--left-placement"), placement === 'left'), "".concat(blockClass, "--slide-in"), slideIn), "".concat(blockClass, "--has-ai-label"), !!aiLabel || !!slug), "".concat(blockClass, "--condensed-actions"), condensedActions), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
   var renderTitle = function renderTitle() {
     return /*#__PURE__*/React.createElement("div", {
       className: cx("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
@@ -352,13 +353,23 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, title));
   };
   var renderHeader = function renderHeader() {
-    var _slug$type;
-    var slugCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
-    var normalizedSlug;
+    var _slug$type, _aiLabel$type;
+    var aiLabelCloseSize = actions && actions.length && /l/.test(size) ? 'md' : 'sm';
+    var normalizedAILabel;
+    /**
+     * slug is deprecated
+     * can remove this condition in future release
+     */
     if (slug && ((_slug$type = slug['type']) === null || _slug$type === void 0 ? void 0 : _slug$type.displayName) === 'Slug') {
-      normalizedSlug = /*#__PURE__*/React.cloneElement(slug, {
+      normalizedAILabel = /*#__PURE__*/React.cloneElement(slug, {
         // slug size is sm unless actions and size > md
-        size: slugCloseSize
+        size: aiLabelCloseSize
+      });
+    }
+    if (aiLabel && ((_aiLabel$type = aiLabel['type']) === null || _aiLabel$type === void 0 ? void 0 : _aiLabel$type.displayName) === 'AILabel') {
+      normalizedAILabel = /*#__PURE__*/React.cloneElement(aiLabel, {
+        // aiLabel size is sm unless actions and size > md
+        size: aiLabelCloseSize
       });
     }
     return /*#__PURE__*/React.createElement("div", {
@@ -366,7 +377,7 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       ref: headerRef
     }, currentStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
       kind: "ghost",
-      size: slugCloseSize,
+      size: aiLabelCloseSize,
       disabled: false,
       renderIcon: function renderIcon(props) {
         return /*#__PURE__*/React.createElement(icons.ArrowLeft, _rollupPluginBabelHelpers.extends({
@@ -380,8 +391,8 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       className: "".concat(blockClass, "__label-text"),
       ref: labelTextRef
     }, labelText), title && title.length && renderTitle(), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__slug-and-close")
-    }, normalizedSlug, /*#__PURE__*/React.createElement(react.IconButton, {
+      className: "".concat(blockClass, "__ai-label-and-close")
+    }, normalizedAILabel, /*#__PURE__*/React.createElement(react.IconButton, {
       className: "".concat(blockClass, "__close-button"),
       label: closeIconDescription,
       onClick: onRequestClose,
@@ -479,7 +490,14 @@ exports.SidePanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
 // Return a placeholder if not released and not enabled by feature flag
 exports.SidePanel = settings.pkg.checkComponentEnabled(exports.SidePanel, componentName);
-exports.SidePanel.propTypes = {
+var deprecatedProps = {
+  /**
+   * **deprecated**
+   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
+   */
+  slug: index.default.node
+};
+exports.SidePanel.propTypes = _rollupPluginBabelHelpers.objectSpread2({
   /**
    * Sets the action toolbar buttons
    */
@@ -616,10 +634,6 @@ exports.SidePanel.propTypes = {
    */
   /**@ts-ignore*/
   slideIn: index.default.bool,
-  /**
-   *  **Experimental:** Provide a `Slug` component to be rendered inside the `SidePanel` component
-   */
-  slug: index.default.node,
   /**
    * Sets the subtitle text
    */
@@ -632,5 +646,5 @@ exports.SidePanel.propTypes = {
     var labelText = _ref7.labelText;
     return labelText;
   })
-};
+}, deprecatedProps);
 exports.SidePanel.displayName = componentName;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.43.2-canary.295+dc53a099b",
+  "version": "2.43.2-canary.298+95c6489e3",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -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": "dc53a099baba3450d769b9e4581c524673529fa0"
+  "gitHead": "95c6489e30e5e20e344eff958e481ee22be9d465"
 }

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

@@ -109,7 +109,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     left: 0;
     border-right: 1px solid $border-subtle-02;
   }
-  &.#{$block-class}.#{$block-class}--has-slug {
+  &.#{$block-class}.#{$block-class}--has-slug,
+  &.#{$block-class}.#{$block-class}--has-ai-label {
     border-color: transparent;
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
       0 4px 10px 2px $ai-drop-shadow;
@@ -195,13 +196,15 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
 
   &.#{$block-class}:has(.#{$block-class}__action-toolbar),
   &.#{$block-class}--has-action-toolbar,
-  &.#{$block-class}--has-slug {
+  &.#{$block-class}--has-slug,
+  &.#{$block-class}--has-ai-label {
     --#{$block-class}--title-padding-right: #{$spacing-10};
   }
 
   &.#{$block-class}:has(.#{$block-class}__action-toolbar),
   &.#{$block-class}--has-action-toolbar {
-    &.#{$block-class}--has-slug {
+    &.#{$block-class}--has-slug,
+    &.#{$block-class}--has-ai-label {
       --#{$block-class}--title-padding-right: #{$spacing-11};
     }
   }
@@ -308,7 +311,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     padding-top: $spacing-03;
   }
 
-  &.#{$block-class}--has-slug .#{$block-class}--scrolls {
+  &.#{$block-class}--has-slug .#{$block-class}--scrolls,
+  &.#{$block-class}--has-ai-label .#{$block-class}--scrolls {
     @include utilities.ai-popover-gradient('default', 0, 'layer');
 
     box-shadow: inset 0 -80px 70px -65px $ai-inner-shadow,
@@ -362,7 +366,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
     height: $spacing-08;
   }
 
-  .#{$block-class}__slug-and-close {
+  .#{$block-class}__slug-and-close,
+  .#{$block-class}__ai-label-and-close {
     position: absolute;
     z-index: 10; /* must be higher than title container border bottom */
     top: 0;
@@ -464,7 +469,8 @@ $action-set-block-class: #{c4p-settings.$pkg-prefix}--action-set;
   inset: 0;
 }
 
-.#{$block-class}--has-slug + .#{$block-class}__overlay {
+.#{$block-class}--has-slug + .#{$block-class}__overlay,
+.#{$block-class}--has-ai-label + .#{$block-class}__overlay {
   /* stylelint-disable-next-line carbon/theme-token-use */
   background-color: $ai-overlay;
 }