@carbon/ibm-products 2.52.0 → 2.53.0

package/es/components/ExpressiveCard/ExpressiveCard.js

@@ -36,6 +36,10 @@ ExpressiveCard.propTypes = {
     iconDescription: PropTypes.string,
     href: PropTypes.string
   })),
+  /**
+   * 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]),
   /**
    * Content that shows in the body of the card
    */
@@ -114,6 +118,7 @@ ExpressiveCard.propTypes = {
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
+   * @deprecated please use the `aiLabel` prop
    */
   slug: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
   /**

package/es/components/FeatureFlags/index.d.ts

@@ -12,19 +12,20 @@ import PropTypes from 'prop-types';
  */
 declare const FeatureFlagContext: React.Context<any>;
 /**
- * Supports an object of feature flag values with the `flags` prop, merging them
+ * Supports individual feature flag values as props, merging them
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
-declare function FeatureFlags({ children, flags }: {
+declare function FeatureFlags({ children, flags, ...newFlags }: {
+    [x: string]: any;
     children: any;
     flags?: {} | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 declare namespace FeatureFlags {
     var propTypes: {
         children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         /**
-         * Provide the feature flags to enabled or disabled in the current React tree
+         * Provide the feature flags to enabled or disabled in the current React tree, this has been deprecated. as we are going to pass individual boolean props for each flag.
          */
         flags: PropTypes.Requireable<{
             [x: string]: boolean | null | undefined;

package/es/components/FeatureFlags/index.js

@@ -5,11 +5,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, slicedToArray as _slicedToArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { useContext, useState, useRef, useEffect, createContext } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import { createScope, FeatureFlags as FeatureFlags$1 } from '@carbon/feature-flags';
 
+var _excluded = ["children", "flags"];
+
 /**
  * Our FeatureFlagContext is used alongside the FeatureFlags component to enable
  * or disable feature flags in a given React tree
@@ -17,21 +19,27 @@ import { createScope, FeatureFlags as FeatureFlags$1 } from '@carbon/feature-fla
 var FeatureFlagContext = /*#__PURE__*/createContext(FeatureFlags$1);
 
 /**
- * Supports an object of feature flag values with the `flags` prop, merging them
+ * Supports individual feature flag values as props, merging them
  * along with the current `FeatureFlagContext` to provide consumers to check if
  * a feature flag is enabled or disabled in a given React tree
  */
 function FeatureFlags(_ref) {
   var children = _ref.children,
     _ref$flags = _ref.flags,
-    flags = _ref$flags === void 0 ? {} : _ref$flags;
+    flags = _ref$flags === void 0 ? {} : _ref$flags,
+    newFlags = _objectWithoutProperties(_ref, _excluded);
   var parentScope = useContext(FeatureFlagContext);
+  var newFlagsObject = Object.keys(newFlags).reduce(function (acc, key) {
+    acc[key] = newFlags[key];
+    return acc;
+  }, {});
+  var combinedFlags = _objectSpread2(_objectSpread2({}, newFlagsObject), flags);
   var _useState = useState(parentScope),
     _useState2 = _slicedToArray(_useState, 2),
     prevParentScope = _useState2[0],
     setPrevParentScope = _useState2[1];
   var _useState3 = useState(function () {
-      var scope = createScope(flags);
+      var scope = createScope(combinedFlags);
       scope.mergeWithScope(parentScope);
       return scope;
     }),
@@ -39,16 +47,15 @@ function FeatureFlags(_ref) {
     scope = _useState4[0],
     updateScope = _useState4[1];
   if (parentScope !== prevParentScope) {
-    var _scope = createScope(flags);
+    var _scope = createScope(combinedFlags);
     _scope.mergeWithScope(parentScope);
     updateScope(_scope);
     setPrevParentScope(parentScope);
   }
 
-  // We use a custom hook to detect if any of the keys or their values change
-  // for flags that are passed in. If they have changed, then we re-create the
-  // FeatureFlagScope using the new flags
-  useChangedValue(flags, isEqual, function (changedFlags) {
+  // We use a custom hook to detect if any of the individual flag props or their values change
+  // If any flags have changed, we re-create the FeatureFlagScope using the updated flags
+  useChangedValue(combinedFlags, isEqual, function (changedFlags) {
     var scope = createScope(changedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
@@ -60,7 +67,7 @@ function FeatureFlags(_ref) {
 FeatureFlags.propTypes = {
   children: PropTypes.node,
   /**
-   * Provide the feature flags to enabled or disabled in the current React tree
+   * Provide the feature flags to enabled or disabled in the current React tree, this has been deprecated. as we are going to pass individual boolean props for each flag.
    */
   flags: PropTypes.objectOf(PropTypes.bool)
 };

package/es/components/FilterPanel/FilterPanelCheckboxWithOverflow/FilterPanelCheckboxWithOverflow.js

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

package/es/components/FullPageError/assets/Error403SVG.d.ts

@@ -1,11 +1,12 @@
 export function Error403SVG({ className, title }: {
     className: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace Error403SVG {
     namespace propTypes {
         export { string as className };
         export { string as title };
     }
 }
+import React from 'react';
 import { string } from 'prop-types';

package/es/components/FullPageError/assets/Error404SVG.d.ts

@@ -1,11 +1,12 @@
 export function Error404SVG({ className, title }: {
     className: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace Error404SVG {
     namespace propTypes {
         export { string as className };
         export { string as title };
     }
 }
+import React from 'react';
 import { string } from 'prop-types';

package/es/components/FullPageError/assets/ErrorGenericSVG.d.ts

@@ -1,11 +1,12 @@
 export function ErrorGenericSVG({ className, title }: {
     className: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace ErrorGenericSVG {
     namespace propTypes {
         export { string as className };
         export { string as title };
     }
 }
+import React from 'react';
 import { string } from 'prop-types';

package/es/components/HTTPErrors/HTTPErrorContent.d.ts

@@ -3,7 +3,7 @@ export function HTTPErrorContent({ description, errorCodeLabel, title, links, }:
     errorCodeLabel: any;
     title: any;
     links: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace HTTPErrorContent {
     export { componentName as displayName };
     export namespace propTypes {
@@ -13,5 +13,6 @@ export namespace HTTPErrorContent {
         let title: import("prop-types").Validator<string>;
     }
 }
+import React from 'react';
 declare const componentName: "HTTPErrorContent";
 export {};

package/es/components/HTTPErrors/assets/HTTPErrorSvg403.d.ts

@@ -1,11 +1,12 @@
 export function HTTPErrorSvg403({ className, title }: {
     className: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace HTTPErrorSvg403 {
     namespace propTypes {
         export { string as className };
         export { string as title };
     }
 }
+import React from 'react';
 import { string } from 'prop-types';

package/es/components/HTTPErrors/assets/HTTPErrorSvg404.d.ts

@@ -1,11 +1,12 @@
 export function HTTPErrorSvg404({ className, title }: {
     className: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace HTTPErrorSvg404 {
     namespace propTypes {
         export { string as className };
         export { string as title };
     }
 }
+import React from 'react';
 import { string } from 'prop-types';

package/es/components/HTTPErrors/assets/HTTPErrorSvgOther.d.ts

@@ -1,11 +1,12 @@
 export function HTTPErrorSvgOther({ className, title }: {
     className: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace HTTPErrorSvgOther {
     namespace propTypes {
         export { string as className };
         export { string as title };
     }
 }
+import React from 'react';
 import { string } from 'prop-types';

package/es/components/InterstitialScreen/InterstitialScreen.js

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

package/es/components/Nav/NavItem.d.ts

@@ -12,7 +12,7 @@ export function NavItem({ activeHref, children, className, current, disabled, el
     label: any;
     onClick?: (() => void) | undefined;
     tabIndex?: number | undefined;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace NavItem {
     export { componentName as displayName };
     export namespace propTypes {
@@ -31,5 +31,6 @@ export namespace NavItem {
     }
 }
 export default NavItem;
+import React from 'react';
 declare const componentName: "NavItem";
 import PropTypes from 'prop-types';

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -9,6 +9,14 @@ import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _
 import { usePrefix, Button, Toggle, Link, IconButton } from '@carbon/react';
 import { Settings, ErrorFilled, CheckmarkFilled, WarningAltFilled, InformationSquareFilled, Close, ChevronDown } from '@carbon/react/icons';
 import React__default, { useRef, useState, useEffect } from 'react';
+import '../EmptyStates/EmptyState.js';
+import '../EmptyStates/EmptyStateV2.js';
+import '../EmptyStates/ErrorEmptyState/ErrorEmptyState.js';
+import '../EmptyStates/NoDataEmptyState/NoDataEmptyState.js';
+import '../EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js';
+import '../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js';
+import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
+import '../EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
@@ -19,7 +27,6 @@ import usePrefersReducedMotion from '../../global/js/hooks/usePrefersReducedMoti
 import wrapFocus from '../../global/js/utils/wrapFocus.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useClickOutside } from '../../global/js/hooks/useClickOutside.js';
-import { NotificationsEmptyState } from '../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js';
 
 var _Close;
 var _excluded = ["className", "data", "daysAgoText", "dismissAllLabel", "dismissSingleNotificationIconDescription", "doNotDisturbDefaultToggled", "doNotDisturbLabel", "emptyStateLabel", "hourAgoText", "hoursAgoText", "minuteAgoText", "minutesAgoText", "monthAgoText", "monthsAgoText", "nowText", "onClickOutside", "onDismissAllNotifications", "onDismissSingleNotification", "onDoNotDisturbChange", "onSettingsClick", "onViewAllClick", "open", "previousLabel", "readLessLabel", "readMoreLabel", "secondsAgoText", "settingsIconDescription", "title", "todayLabel", "viewAllLabel", "yearAgoText", "yearsAgoText", "yesterdayAtText", "yesterdayLabel", "selectorsFloatingMenus", "triggerButtonRef"];

package/es/components/PageHeader/PageHeader.d.ts

@@ -149,6 +149,7 @@ interface TitleIcon {
     cancelDescription?: string;
     editDescription?: string;
     saveDescription?: string;
+    tooltipAlignment?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right';
 }
 interface TitleContent {
     content: ReactNode;
@@ -269,6 +270,7 @@ interface PageHeaderBaseProps extends PropsWithChildren {
      *    - editableLabel: label for edit required if onChange supplied
      *    - cancelDescription: label for edit cancel button
      *    - saveDescription: label for edit save button
+     *    - tooltipAlignment: position for tooltip displayed for large titles. Default to "bottom"
      * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
      *    - content: title or name of current location shown in main part of page header
      *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied

package/es/components/PageHeader/PageHeader.js

@@ -788,6 +788,7 @@ PageHeader.propTypes = _objectSpread2({
    *    - editableLabel: label for edit required if onChange supplied
    *    - cancelDescription: label for edit cancel button
    *    - saveDescription: label for edit save button
+   *    - tooltipAlignment: position for tooltip displayed for large titles. Default to "bottom".
    * - Object containing user defined contents. These must fit within the area defined for the title in both main part of the header and the breadcrumb.
    *    - content: title or name of current location shown in main part of page header
    *    - breadcrumbContent: version of content used in the breadcrumb on scroll. If not supplied
@@ -812,7 +813,9 @@ PageHeader.propTypes = _objectSpread2({
     //.isRequired.if(editInPlaceRequired),
     editDescription: PropTypes.string,
     // .isRequired.if(editInPlaceRequired),
-    saveDescription: PropTypes.string //.isRequired.if(editInPlaceRequired),
+    saveDescription: PropTypes.string,
+    //.isRequired.if(editInPlaceRequired),
+    tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
     // Update docgen if changed
   }), PropTypes.string, PropTypes.shape({
     content: PropTypes.node.isRequired,

package/es/components/PageHeader/PageHeaderTitle.d.ts

@@ -2,7 +2,7 @@ export function PageHeaderTitle({ blockClass, hasBreadcrumbRow, title }: {
     blockClass: any;
     hasBreadcrumbRow: any;
     title: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace PageHeaderTitle {
     namespace propTypes {
         let blockClass: PropTypes.Validator<string>;
@@ -18,6 +18,7 @@ export namespace PageHeaderTitle {
             onSave: PropTypes.Requireable<(...args: any[]) => any>;
             cancelDescription: any;
             saveDescription: any;
+            tooltipAlignment: PropTypes.Requireable<string>;
         }> | PropTypes.InferProps<{
             content: PropTypes.Validator<NonNullable<PropTypes.ReactNodeLike>>;
             breadcrumbContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
@@ -28,4 +29,5 @@ export namespace PageHeaderTitle {
 export function editInPlaceRequired({ onSave }: {
     onSave: any;
 }): boolean;
+import React from 'react';
 import PropTypes from 'prop-types';

package/es/components/PageHeader/PageHeaderTitle.js

@@ -5,14 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { useState, useRef, useLayoutEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
-import { SkeletonText } from '@carbon/react';
+import { SkeletonText, DefinitionTooltip } from '@carbon/react';
 import { EditInPlace } from '../EditInPlace/EditInPlace.js';
 
-var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription"];
+var _excluded = ["text", "content", "loading", "icon", "asText", "onChange", "onSave", "editDescription", "editableLabel", "cancelDescription", "saveDescription", "tooltipAlignment"];
 
 /**
  *
@@ -38,18 +38,41 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
     editableLabel = title.editableLabel,
     cancelDescription = title.cancelDescription,
     saveDescription = title.saveDescription,
+    _title$tooltipAlignme = title.tooltipAlignment,
+    tooltipAlignment = _title$tooltipAlignme === void 0 ? 'bottom' : _title$tooltipAlignme,
     rest = _objectWithoutProperties(title, _excluded);
   var titleText;
   var isEditable = !!onSave;
+  var _useState = useState(),
+    _useState2 = _slicedToArray(_useState, 2),
+    isEllipsisApplied = _useState2[0],
+    setIsEllipsisApplied = _useState2[1];
+  var longTitleRef = useRef(undefined);
+  var titleRef = useRef(undefined);
+  useLayoutEffect(function () {
+    setIsEllipsisApplied(isEllipsisActive());
+  }, [longTitleRef, titleRef, title]);
+  var isEllipsisActive = function isEllipsisActive() {
+    if (longTitleRef.current) {
+      var _longTitleRef$current, _longTitleRef$current2;
+      return ((_longTitleRef$current = longTitleRef.current) === null || _longTitleRef$current === void 0 ? void 0 : _longTitleRef$current.offsetWidth) < ((_longTitleRef$current2 = longTitleRef.current) === null || _longTitleRef$current2 === void 0 ? void 0 : _longTitleRef$current2.scrollWidth);
+    } else if (titleRef.current) {
+      var _titleRef$current, _titleRef$current2;
+      return ((_titleRef$current = titleRef.current) === null || _titleRef$current === void 0 ? void 0 : _titleRef$current.offsetWidth) < ((_titleRef$current2 = titleRef.current) === null || _titleRef$current2 === void 0 ? void 0 : _titleRef$current2.scrollWidth);
+    }
+    return false;
+  };
   if (text || !content) {
     if (text === undefined && typeof title === 'string') {
       text = title;
       asText = title;
     }
     var TitleIcon = icon;
-    titleInnards = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && !loading ? /*#__PURE__*/React__default.createElement(TitleIcon, {
+    titleInnards = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, icon && !loading ? /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(blockClass, "__title-icon-wrapper")
+    }, /*#__PURE__*/React__default.createElement(TitleIcon, {
       className: "".concat(blockClass, "__title-icon")
-    }) : null, loading ? /*#__PURE__*/React__default.createElement(SkeletonText, {
+    })) : null, loading ? /*#__PURE__*/React__default.createElement(SkeletonText, {
       className: "".concat(blockClass, "__title-skeleton")
     }) : isEditable ? /*#__PURE__*/React__default.createElement(EditInPlace, _extends({
       tooltipAlignment: "bottom",
@@ -62,7 +85,17 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       onSave: onSave,
       size: "md",
       inheritTypography: true
-    }, rest)) : /*#__PURE__*/React__default.createElement("span", {
+    }, rest)) : isEllipsisApplied ? /*#__PURE__*/React__default.createElement(DefinitionTooltip, {
+      openOnHover: false,
+      align: tooltipAlignment,
+      definition: text,
+      className: "".concat(blockClass, "__tooltip")
+    }, /*#__PURE__*/React__default.createElement("span", {
+      ref: longTitleRef,
+      className: "".concat(blockClass, "__titleText")
+    }, text)) : /*#__PURE__*/React__default.createElement("span", {
+      ref: titleRef,
+      className: "".concat(blockClass, "__titleText"),
       title: !loading ? asText : null
     }, text));
   } else {
@@ -117,7 +150,8 @@ PageHeaderTitle.propTypes = {
     onChange: PropTypes.func,
     onSave: PropTypes.func,
     cancelDescription: PropTypes.string.isRequired.if(editInPlaceRequired),
-    saveDescription: PropTypes.string.isRequired.if(editInPlaceRequired)
+    saveDescription: PropTypes.string.isRequired.if(editInPlaceRequired),
+    tooltipAlignment: PropTypes.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
     // Update docgen if changed
   }), PropTypes.string, PropTypes.shape({
     content: PropTypes.node.isRequired,

package/es/components/ProductiveCard/ProductiveCard.d.ts

@@ -21,6 +21,10 @@ export interface ProductiveCardProps extends PropsWithChildren {
      * Icons that are displayed on card. Refer to design documentation for implementation guidelines. Note- href will supersede onClick
      */
     actionIcons?: ActionIcon[];
+    /**
+     * 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 | boolean;
     /**
      * Determines if the action icons are on the top or bottom of the card
      */
@@ -104,6 +108,7 @@ export interface ProductiveCardProps extends PropsWithChildren {
     /**
      * **Experimental:** For all cases a `Slug` component can be provided.
      * Clickable tiles only accept a boolean value of true and display a hollow slug.
+     * @deprecated please use the `aiLabel` prop
      */
     slug?: ReactNode | boolean;
     /**

package/es/components/ProductiveCard/ProductiveCard.js

@@ -48,6 +48,10 @@ ProductiveCard.propTypes = {
    * Determines if the action icons are on the top or bottom of the card
    */
   actionsPlacement: PropTypes.oneOf(['top', 'bottom']),
+  /**
+   * 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]),
   /**
    * Content that shows in the body of the card
    */

package/es/components/ScrollGradient/ScrollGradient.js

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

package/es/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/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/es/components/SimpleHeader/SimpleHeader.d.ts

@@ -20,7 +20,7 @@ export function SimpleHeader({ breadcrumbs, className, title, noTrailingSlash, m
     maxVisible: any;
     overflowAriaLabel: any;
     overflowTooltipAlign: any;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;
 export namespace SimpleHeader {
     namespace propTypes {
         export let breadcrumbs: PropTypes.Requireable<(PropTypes.InferProps<{
@@ -43,4 +43,5 @@ export namespace SimpleHeader {
         export let title: PropTypes.Requireable<string>;
     }
 }
+import React from 'react';
 import PropTypes from 'prop-types';