@carbon/ibm-products 2.52.0 → 2.53.0-rc.0

package/lib/components/FeatureFlags/index.js

@@ -12,6 +12,8 @@ var React = require('react');
 var index = require('../../_virtual/index.js');
 var FeatureFlags$1 = require('@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
@@ -19,21 +21,27 @@ var FeatureFlags$1 = require('@carbon/feature-flags');
 var FeatureFlagContext = /*#__PURE__*/React.createContext(FeatureFlags$1.FeatureFlags);
 
 /**
- * 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 = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var parentScope = React.useContext(FeatureFlagContext);
+  var newFlagsObject = Object.keys(newFlags).reduce(function (acc, key) {
+    acc[key] = newFlags[key];
+    return acc;
+  }, {});
+  var combinedFlags = _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newFlagsObject), flags);
   var _useState = React.useState(parentScope),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     prevParentScope = _useState2[0],
     setPrevParentScope = _useState2[1];
   var _useState3 = React.useState(function () {
-      var scope = FeatureFlags$1.createScope(flags);
+      var scope = FeatureFlags$1.createScope(combinedFlags);
       scope.mergeWithScope(parentScope);
       return scope;
     }),
@@ -41,16 +49,15 @@ function FeatureFlags(_ref) {
     scope = _useState4[0],
     updateScope = _useState4[1];
   if (parentScope !== prevParentScope) {
-    var _scope = FeatureFlags$1.createScope(flags);
+    var _scope = FeatureFlags$1.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 = FeatureFlags$1.createScope(changedFlags);
     scope.mergeWithScope(parentScope);
     updateScope(scope);
@@ -62,7 +69,7 @@ function FeatureFlags(_ref) {
 FeatureFlags.propTypes = {
   children: index.default.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: index.default.objectOf(index.default.bool)
 };

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/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/lib/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/lib/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/lib/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/lib/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/lib/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/lib/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/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/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/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -11,6 +11,14 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
 var React = require('react');
+require('../EmptyStates/EmptyState.js');
+require('../EmptyStates/EmptyStateV2.js');
+require('../EmptyStates/ErrorEmptyState/ErrorEmptyState.js');
+require('../EmptyStates/NoDataEmptyState/NoDataEmptyState.js');
+require('../EmptyStates/NoTagsEmptyState/NoTagsEmptyState.js');
+require('../EmptyStates/NotFoundEmptyState/NotFoundEmptyState.js');
+var NotificationsEmptyState = require('../EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js');
+require('../EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js');
 var index = require('../../_virtual/index.js');
 var cx = require('classnames');
 var devtools = require('../../global/js/utils/devtools.js');
@@ -21,7 +29,6 @@ var usePrefersReducedMotion = require('../../global/js/hooks/usePrefersReducedMo
 var wrapFocus = require('../../global/js/utils/wrapFocus.js');
 var usePreviousValue = require('../../global/js/hooks/usePreviousValue.js');
 var useClickOutside = require('../../global/js/hooks/useClickOutside.js');
-var NotificationsEmptyState = require('../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/lib/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/lib/components/PageHeader/PageHeader.js

@@ -790,6 +790,7 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.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
@@ -814,7 +815,9 @@ exports.PageHeader.propTypes = _rollupPluginBabelHelpers.objectSpread2({
     //.isRequired.if(editInPlaceRequired),
     editDescription: index.default.string,
     // .isRequired.if(editInPlaceRequired),
-    saveDescription: index.default.string //.isRequired.if(editInPlaceRequired),
+    saveDescription: index.default.string,
+    //.isRequired.if(editInPlaceRequired),
+    tooltipAlignment: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
     // Update docgen if changed
   }), index.default.string, index.default.shape({
     content: index.default.node.isRequired,

package/lib/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/lib/components/PageHeader/PageHeaderTitle.js

@@ -14,7 +14,7 @@ var cx = require('classnames');
 var react = require('@carbon/react');
 var EditInPlace = require('../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"];
 
 /**
  *
@@ -40,18 +40,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 = _rollupPluginBabelHelpers.objectWithoutProperties(title, _excluded);
   var titleText;
   var isEditable = !!onSave;
+  var _useState = React.useState(),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isEllipsisApplied = _useState2[0],
+    setIsEllipsisApplied = _useState2[1];
+  var longTitleRef = React.useRef(undefined);
+  var titleRef = React.useRef(undefined);
+  React.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.createElement(React.Fragment, null, icon && !loading ? /*#__PURE__*/React.createElement(TitleIcon, {
+    titleInnards = /*#__PURE__*/React.createElement(React.Fragment, null, icon && !loading ? /*#__PURE__*/React.createElement("span", {
+      className: "".concat(blockClass, "__title-icon-wrapper")
+    }, /*#__PURE__*/React.createElement(TitleIcon, {
       className: "".concat(blockClass, "__title-icon")
-    }) : null, loading ? /*#__PURE__*/React.createElement(react.SkeletonText, {
+    })) : null, loading ? /*#__PURE__*/React.createElement(react.SkeletonText, {
       className: "".concat(blockClass, "__title-skeleton")
     }) : isEditable ? /*#__PURE__*/React.createElement(EditInPlace.EditInPlace, _rollupPluginBabelHelpers.extends({
       tooltipAlignment: "bottom",
@@ -64,7 +87,17 @@ var PageHeaderTitle = function PageHeaderTitle(_ref) {
       onSave: onSave,
       size: "md",
       inheritTypography: true
-    }, rest)) : /*#__PURE__*/React.createElement("span", {
+    }, rest)) : isEllipsisApplied ? /*#__PURE__*/React.createElement(react.DefinitionTooltip, {
+      openOnHover: false,
+      align: tooltipAlignment,
+      definition: text,
+      className: "".concat(blockClass, "__tooltip")
+    }, /*#__PURE__*/React.createElement("span", {
+      ref: longTitleRef,
+      className: "".concat(blockClass, "__titleText")
+    }, text)) : /*#__PURE__*/React.createElement("span", {
+      ref: titleRef,
+      className: "".concat(blockClass, "__titleText"),
       title: !loading ? asText : null
     }, text));
   } else {
@@ -119,7 +152,8 @@ PageHeaderTitle.propTypes = {
     onChange: index.default.func,
     onSave: index.default.func,
     cancelDescription: index.default.string.isRequired.if(editInPlaceRequired),
-    saveDescription: index.default.string.isRequired.if(editInPlaceRequired)
+    saveDescription: index.default.string.isRequired.if(editInPlaceRequired),
+    tooltipAlignment: index.default.oneOf(['top', 'top-left', 'top-right', 'bottom', 'bottom-left', 'bottom-right', 'left', 'right'])
     // Update docgen if changed
   }), index.default.string, index.default.shape({
     content: index.default.node.isRequired,

package/lib/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/lib/components/ProductiveCard/ProductiveCard.js

@@ -50,6 +50,10 @@ exports.ProductiveCard.propTypes = {
    * Determines if the action icons are on the top or bottom of the card
    */
   actionsPlacement: index.default.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: index.default.oneOfType([index.default.node, index.default.bool]),
   /**
    * Content that shows in the body of the card
    */

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/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/lib/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';

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/TagOverflow/TagOverflow.d.ts

@@ -7,6 +7,9 @@
 import React, { ReactNode, RefObject } from 'react';
 export interface TagOverflowItem {
     className?: string;
+    /**
+     * @deprecated The `filter` prop is no longer going to be used. To use DismissibleTags, pass in an onClose function.
+     */
     filter?: boolean;
     id: string;
     label: string;

package/lib/components/TagOverflow/TagOverflow.js

@@ -23,7 +23,7 @@ var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 var _excluded = ["align", "allTagsModalAriaLabel", "allTagsModalSearchLabel", "allTagsModalSearchPlaceholderText", "allTagsModalTarget", "allTagsModalTitle", "autoAlign", "className", "containingElementRef", "items", "maxVisible", "measurementOffset", "multiline", "overflowAlign", "overflowClassName", "overflowType", "onOverflowTagChange", "showAllTagsLabel", "tagComponent"],
   _excluded2 = ["className", "id"],
   _excluded3 = ["tagType"],
-  _excluded4 = ["id", "label", "tagType", "onClose"];
+  _excluded4 = ["id", "label", "tagType", "onClose", "filter"];
 var blockClass = "".concat(settings.pkg.prefix, "--tag-overflow");
 var componentName = 'TagOverflow';
 var allTagsModalSearchThreshold = 10;
@@ -183,6 +183,7 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
         label = item.label,
         tagType = item.tagType,
         _onClose = item.onClose,
+        filter = item.filter,
         other = _rollupPluginBabelHelpers.objectWithoutProperties(item, _excluded4);
       // If there is no template prop, then render items as Tags
       return /*#__PURE__*/React.createElement("div", {
@@ -193,12 +194,16 @@ exports.TagOverflow = /*#__PURE__*/React.forwardRef(function (props, ref) {
       }, /*#__PURE__*/React.createElement(react.Tooltip, {
         align: overflowAlign,
         label: label
-      }, /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
+      }, typeof _onClose === 'function' || filter ? /*#__PURE__*/React.createElement(react.DismissibleTag, _rollupPluginBabelHelpers.extends({}, other, {
         className: "".concat(blockClass, "__item--tag"),
         type: tagType,
         onClose: function onClose() {
           return handleTagOnClose(_onClose, index);
-        }
+        },
+        text: label
+      })) : /*#__PURE__*/React.createElement(react.Tag, _rollupPluginBabelHelpers.extends({}, other, {
+        className: "".concat(blockClass, "__item--tag"),
+        type: tagType
       }), label)));
     }
   }), /*#__PURE__*/React.createElement("span", {