@carbon/ibm-products 2.34.0 → 2.35.0

package/lib/components/InlineTip/InlineTip.d.ts

@@ -1,7 +1,95 @@
+/**
+ * Copyright IBM Corp. 2023, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { ReactNode } from 'react';
+type MediaType = {
+    render?: () => ReactNode;
+    filePaths?: string[];
+};
+interface InlineTipProps {
+    /**
+     * Optional "call to action" ghost button or link that can appear
+     * directly below the content. This component comes with pre-styled
+     * elements available to use: `InlineTipLink` and `InlineTipButton`.
+     */
+    action?: ReactNode;
+    /**
+     * Provide the contents of the InlineTip.
+     */
+    children: ReactNode;
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * Tooltip text and aria label for the Close button icon.
+     */
+    closeIconDescription?: string;
+    /**
+     * The label for the collapse button.
+     * This button is not visible if `media` is specified.
+     */
+    collapseButtonLabel?: string;
+    /**
+     * If set to `true`, it will truncate the body text to
+     * one line and expose an expand/collapse button toggle.
+     *
+     * This feature is disabled if `media` is specified.
+     */
+    collapsible?: boolean;
+    /**
+     * The label for the expand button.
+     * This button is not visible if `media` is specified.
+     */
+    expandButtonLabel?: string;
+    /**
+     * The object describing an image in one of two shapes.
+     * - If a single media element is required, use `{render}`.
+     * - If a stepped animation is required, use `{filePaths}`.
+     *
+     * Enabling `media` disables the `collapsible` feature.
+     */
+    media: MediaType;
+    /**
+     * Set to `true` to arrange the information in a format
+     * that is easier to read in a limited space.
+     */
+    narrow?: boolean;
+    /**
+     * Function to call when the tertiary button is clicked.
+     */
+    onClick?: () => void;
+    /**
+     * Function to call when the InlineTip is closed via the "X" button.
+     */
+    onClose?: () => void;
+    /**
+     * Defining the label will show a the tertiary button with the crossroads icon.
+     * You will still need to define the `onClose` method to trigger a callback.
+     */
+    tertiaryButtonLabel?: string;
+    /**
+     * The title of the InlineTip.
+     */
+    title: string;
+    /**
+     * If true, insert 1 rem of "space" on the left of the component.
+     * This will allow the component's content to line up with other
+     * content on the page under special circumstances.
+     *
+     * This will only be applied when `narrow` is false.
+     */
+    withLeftGutter?: boolean;
+}
 /**
  * Inline tips are messages embedded within other components that
  * provide an ambient way to deliver learning content without
  * distracting the user from their flow.
  */
-export let InlineTip: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let InlineTip: React.ForwardRefExoticComponent<InlineTipProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/InlineTip/InlineTip.js

@@ -44,9 +44,9 @@ var defaults = {
   narrow: false,
   withLeftGutter: false,
   onClick: function onClick() {},
-  onClose: function onClose() {}
+  onClose: function onClose() {},
+  title: 'Use case-specific heading'
 };
-
 /**
  * Inline tips are messages embedded within other components that
  * provide an ambient way to deliver learning content without
@@ -196,6 +196,7 @@ exports.InlineTip.propTypes = {
    *
    * Enabling `media` disables the `collapsible` feature.
    */
+  /**@ts-ignore*/
   media: index["default"].oneOfType([index["default"].shape({
     render: index["default"].func
   }), index["default"].shape({

package/lib/components/Nav/Nav.js

@@ -111,7 +111,7 @@ exports.Nav = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
    */
   var handleListClick = function handleListClick(id) {
     Object.keys(navigationLists.current).forEach(function (key) {
-      if (key !== id && !navigationLists.current[key].isExpandedOnPageload) {
+      if (key !== id && !navigationLists.current[key].isExpandedOnPageLoad) {
         navigationLists.current[key].close();
       }
     });

package/lib/components/Nav/NavList.js

@@ -31,7 +31,7 @@ var defaults = {
   className: '',
   children: null,
   id: '',
-  isExpandedOnPageload: false,
+  isExpandedOnPageLoad: false,
   onItemClick: function onItemClick() {},
   onListClick: function onListClick() {},
   tabIndex: 0,
@@ -50,8 +50,8 @@ var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     icon = _ref$icon === void 0 ? defaults.icon : _ref$icon,
     _ref$id = _ref.id,
     id = _ref$id === void 0 ? defaults.id : _ref$id,
-    _ref$isExpandedOnPage = _ref.isExpandedOnPageload,
-    isExpandedOnPageload = _ref$isExpandedOnPage === void 0 ? defaults.isExpandedOnPageload : _ref$isExpandedOnPage,
+    _ref$isExpandedOnPage = _ref.isExpandedOnPageLoad,
+    isExpandedOnPageLoad = _ref$isExpandedOnPage === void 0 ? defaults.isExpandedOnPageLoad : _ref$isExpandedOnPage,
     _ref$navigationItemTi = _ref.navigationItemTitle,
     navigationItemTitle = _ref$navigationItemTi === void 0 ? defaults.navigationItemTitle : _ref$navigationItemTi,
     _ref$onItemClick = _ref.onItemClick,
@@ -62,7 +62,7 @@ var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
     tabIndex = _ref$tabIndex === void 0 ? defaults.tabIndex : _ref$tabIndex,
     _ref$title = _ref.title,
     title = _ref$title === void 0 ? defaults.title : _ref$title;
-  var _useState = React.useState(isExpandedOnPageload),
+  var _useState = React.useState(isExpandedOnPageLoad),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
@@ -74,7 +74,7 @@ var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
       var childProps = _ref3.props;
       return childProps.href;
     });
-    setOpen(hrefs.includes(activeHref) || isExpandedOnPageload);
+    setOpen(hrefs.includes(activeHref) || isExpandedOnPageLoad);
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
@@ -108,7 +108,7 @@ var NavList = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
   React.useImperativeHandle(ref, function () {
     return {
       close: close,
-      isExpandedOnPageload: isExpandedOnPageload
+      isExpandedOnPageLoad: isExpandedOnPageLoad
     };
   });
   var newChildren = React__default["default"].Children.map(children, function (child, index) {
@@ -159,7 +159,7 @@ NavList.propTypes = {
   /** @type {string} ID of a list. */
   id: index.propTypesExports.string,
   /** @type {boolean} State of a list. */
-  isExpandedOnPageload: index.propTypesExports.bool,
+  isExpandedOnPageLoad: index.propTypesExports.bool,
   /** @type {boolean} Title of nav. */
   navigationItemTitle: index.propTypesExports.string,
   /** @type {Function} Click handler for an item. */

package/lib/components/NotificationsPanel/NotificationsPanel.js

@@ -326,7 +326,7 @@ exports.NotificationsPanel = /*#__PURE__*/React__default["default"].forwardRef(f
     id: blockClass,
     className: cx__default["default"](blockClass, className, "".concat(blockClass, "__container")),
     style: {
-      animation: !reducedMotion.matches ? "".concat(open ? 'fade-in 250ms' : 'fade-out 250ms') : null
+      animation: !reducedMotion.matches ? "".concat(open ? 'fade-in 250ms' : 'fade-out forwards 250ms') : null
     },
     onAnimationEnd: onAnimationEnd,
     ref: ref || notificationPanelRef

package/lib/components/PageHeader/PageHeader.js

@@ -195,7 +195,7 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
     checkUpdateVerticalSpace();
   };
   var handleCollapseToggle = function handleCollapseToggle() {
-    PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, metrics.headerOffset, metrics.headerTopValue);
+    PageHeaderUtils.utilSetCollapsed(!fullyCollapsed, headerRef, metrics.headerOffset, metrics.headerTopValue);
   };
 
   // use effects
@@ -314,9 +314,9 @@ exports.PageHeader = /*#__PURE__*/React__default["default"].forwardRef(function
   };
   React.useEffect(function () {
     if (collapseHeader === true) {
-      PageHeaderUtils.utilSetCollapsed(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
+      PageHeaderUtils.utilSetCollapsed(collapseHeader, headerRef, metrics.headerOffset, metrics.headerTopValue);
     }
-  }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
+  }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue, headerRef]);
   useResizeObserver.useResizeObserver(sizingContainerRef, handleResizeActionBarColumn);
   useResizeObserver.useResizeObserver(headerRef, handleResize);
 

package/lib/components/PageHeader/PageHeaderUtils.d.ts

@@ -1,6 +1,6 @@
 export const blockClass: string;
 export function utilCheckUpdateVerticalSpace(headerRef: {}, offsetTopMeasuringRef: {}, navigation: {}, enableBreadcrumbScroll: boolean, hasActionBar: boolean, widthIsNarrow: boolean, setMetrics: () => any): void;
-export function utilSetCollapsed(collapse: any, headerOffset: any, headerTopValue: any): void;
+export function utilSetCollapsed(collapse: any, headerRef: any, headerOffset: any, headerTopValue: any): void;
 export function utilGetBreadcrumbItemForTitle(blockClass: any, collapseTitle: any, title: any): {
     label: any;
     title: any;

package/lib/components/PageHeader/PageHeaderUtils.js

@@ -148,16 +148,17 @@ var utilCheckUpdateVerticalSpace = function utilCheckUpdateVerticalSpace(headerR
 };
 
 // Trigger a window scroll, if necessary, to set the collapsed state.
-var utilSetCollapsed = function utilSetCollapsed(collapse, headerOffset, headerTopValue) {
+var utilSetCollapsed = function utilSetCollapsed(collapse, headerRef, headerOffset, headerTopValue) {
   /* don't know how to test resize */
   /* istanbul ignore else */
+  var scrollableTarget = scrollableAncestor.scrollableAncestor(headerRef.current);
   if (collapse) {
-    window.scrollTo({
+    scrollableTarget.scrollTo({
       top: headerOffset - headerTopValue,
       behavior: 'smooth'
     });
   } else {
-    window.scrollTo({
+    scrollableTarget.scrollTo({
       top: 0,
       behavior: 'smooth'
     });

package/lib/components/SidePanel/SidePanel.js

@@ -14,7 +14,6 @@ var React = require('react');
 var framerMotion = require('framer-motion');
 var index = require('../../node_modules/prop-types/index.js');
 var cx = require('classnames');
-var useResizeObserver = require('../../global/js/hooks/useResizeObserver.js');
 var carbonMotion = require('@carbon/motion');
 var devtools = require('../../global/js/utils/devtools.js');
 var propsHelper = require('../../global/js/utils/props-helper.js');
@@ -119,14 +118,48 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     keyDownListener = _useFocus.keyDownListener;
   var panelRefValue = sidePanelRef.current;
   var shouldReduceMotion = framerMotion.useReducedMotion();
+
+  // Title animation on scroll related state
+  var _useState7 = React.useState(0),
+    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+    labelTextHeight = _useState8[0],
+    setLabelTextHeight = _useState8[1];
+  React.useEffect(function () {
+    if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
+      setDoAnimateTitle(false);
+    } else {
+      setDoAnimateTitle(animateTitle);
+    }
+  }, [animateTitle, open]);
+  var titleItemsStyles = React.useCallback(function (progress) {
+    if (subtitleRef !== null && subtitleRef !== void 0 && subtitleRef.current) {
+      var _subtitleEl$style;
+      var subtitleEl = subtitleRef === null || subtitleRef === void 0 ? void 0 : subtitleRef.current;
+      var height = subtitleEl === null || subtitleEl === void 0 ? void 0 : subtitleEl.clientHeight;
+      var calculatedMargin = height * progress;
+      subtitleEl === null || subtitleEl === void 0 || (_subtitleEl$style = subtitleEl.style) === null || _subtitleEl$style === void 0 || _subtitleEl$style.setProperty('margin-top', "".concat(-calculatedMargin, "px"));
+    }
+    if (labelTextRef !== null && labelTextRef !== void 0 && labelTextRef.current) {
+      var _labelTextRef$current;
+      var _calculatedMargin = labelTextHeight * progress;
+      labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current = labelTextRef.current) === null || _labelTextRef$current === void 0 || (_labelTextRef$current = _labelTextRef$current.style) === null || _labelTextRef$current === void 0 || _labelTextRef$current.setProperty('margin-top', "".concat(-_calculatedMargin, "px"));
+    }
+  }, [labelTextHeight]);
   React.useEffect(function () {
-    setDoAnimateTitle(animateTitle);
-  }, [animateTitle]);
+    if (open && animateTitle && labelTextRef !== null && labelTextRef !== void 0 && labelTextRef.current) {
+      var _labelTextRef$current2;
+      setLabelTextHeight(Number((labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current2 = labelTextRef.current) === null || _labelTextRef$current2 === void 0 ? void 0 : _labelTextRef$current2.clientHeight) || null));
+    }
+  }, [animateTitle, labelTextRef, open]);
   var handleScroll = React.useCallback(function () {
-    var _animatedScrollRef$cu;
-    var scrollTop = animatedScrollRef === null || animatedScrollRef === void 0 || (_animatedScrollRef$cu = animatedScrollRef.current) === null || _animatedScrollRef$cu === void 0 ? void 0 : _animatedScrollRef$cu.scrollTop;
-    panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), (Math.min(Number(scrollTop), scrollAnimationDistance) / scrollAnimationDistance).toString());
-  }, [scrollAnimationDistance, panelRefValue]);
+    if (doAnimateTitle && innerContentRef !== null && innerContentRef !== void 0 && innerContentRef.current) {
+      var _innerContentRef$curr;
+      var scrollTop = innerContentRef === null || innerContentRef === void 0 || (_innerContentRef$curr = innerContentRef.current) === null || _innerContentRef$curr === void 0 ? void 0 : _innerContentRef$curr.scrollTop;
+      var animationProgress = Math.min(Number(scrollTop), scrollAnimationDistance) / scrollAnimationDistance;
+      panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), animationProgress.toString());
+      titleItemsStyles(animationProgress);
+    }
+  }, [doAnimateTitle, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style, scrollAnimationDistance, titleItemsStyles]);
   var reducedMotion = typeof window !== 'undefined' && (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)') : {
     matches: true
   };
@@ -134,8 +167,8 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   // scroll panel to top going between steps
   React.useEffect(function () {
     if (sidePanelRef && panelRefValue) {
-      var _animatedScrollRef$cu2;
-      var scrollableSection = (_animatedScrollRef$cu2 = animatedScrollRef.current) !== null && _animatedScrollRef$cu2 !== void 0 ? _animatedScrollRef$cu2 : innerContentRef.current;
+      var _animatedScrollRef$cu;
+      var scrollableSection = (_animatedScrollRef$cu = animatedScrollRef.current) !== null && _animatedScrollRef$cu !== void 0 ? _animatedScrollRef$cu : innerContentRef.current;
       if (scrollableSection) {
         scrollableSection.scrollTop = 0;
       }
@@ -158,9 +191,9 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   var checkSetDoAnimateTitle = function checkSetDoAnimateTitle() {
     var canDoAnimateTitle = false;
     if (panelRefValue && open && animateTitle && animationComplete && titleRef !== null && titleRef !== void 0 && titleRef.current && title && title.length && !reducedMotion.matches) {
-      var _labelTextRef$current, _labelTextRef$current2, _subtitleRef$current$, _subtitleRef$current;
+      var _labelTextRef$current3, _labelTextRef$current4, _subtitleRef$current$, _subtitleRef$current;
       var titleEl = titleRef.current;
-      var labelHeight = (_labelTextRef$current = labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current2 = labelTextRef.current) === null || _labelTextRef$current2 === void 0 ? void 0 : _labelTextRef$current2.offsetHeight) !== null && _labelTextRef$current !== void 0 ? _labelTextRef$current : 0;
+      var labelHeight = (_labelTextRef$current3 = labelTextRef === null || labelTextRef === void 0 || (_labelTextRef$current4 = labelTextRef.current) === null || _labelTextRef$current4 === void 0 ? void 0 : _labelTextRef$current4.offsetHeight) !== null && _labelTextRef$current3 !== void 0 ? _labelTextRef$current3 : 0;
       var subtitleHeight = (_subtitleRef$current$ = subtitleRef === null || subtitleRef === void 0 || (_subtitleRef$current = subtitleRef.current) === null || _subtitleRef$current === void 0 ? void 0 : _subtitleRef$current.offsetHeight) !== null && _subtitleRef$current$ !== void 0 ? _subtitleRef$current$ : 0;
 
       // Adjusts space at bottom of titles by changing where scrolling finishes
@@ -171,11 +204,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
 
       // used to calculate the header moves
       panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-distance"), _scrollAnimationDistance.toString());
-      var scrollEl = animatedScrollRef.current;
-      if (!scrollEl && animateTitle && !doAnimateTitle) {
-        // may be switching back based on resize
-        scrollEl = innerContentRef.current;
-      }
+      var scrollEl = innerContentRef.current;
       if (scrollEl) {
         var _window2;
         var innerComputed = (_window2 = window) === null || _window2 === void 0 ? void 0 : _window2.getComputedStyle(innerContentRef.current);
@@ -189,20 +218,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }
   };
   React.useEffect(function () {
-    if (doAnimateTitle && animatedScrollRef.current) {
-      // only add scroll if the doAnimateTitle is already true
-      // should come back through if false and canDoAnimateTitle is true
-      animatedScrollRef.current.addEventListener('scroll', handleScroll);
-    }
     if (!doAnimateTitle && sidePanelRef.current) {
       panelRefValue === null || panelRefValue === void 0 || panelRefValue.style.setProperty("--".concat(blockClass, "--scroll-animation-progress"), '0');
     }
-  }, [animatedScrollRef, doAnimateTitle, handleScroll, sidePanelRef, panelRefValue]);
-
-  /* istanbul ignore next */
-  var handleResize = function handleResize() {
-    checkSetDoAnimateTitle();
-  };
+  }, [doAnimateTitle, handleScroll, sidePanelRef, innerContentRef, open, panelRefValue === null || panelRefValue === void 0 ? void 0 : panelRefValue.style]);
 
   // Calculate scroll distances
   React.useEffect(function () {
@@ -211,7 +230,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }
 
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id, animatedScrollRef.current]);
+  }, [open, doAnimateTitle /* use do instead of animateTitle directly */, animationComplete, handleScroll, title, size, reducedMotion.matches, id]);
 
   // click outside functionality if `includeOverlay` prop is set
   React.useEffect(function () {
@@ -310,7 +329,7 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
     }
   }, [animationComplete, firstElement, open, selectorPrimaryFocus]);
   var primaryActionContainerClassNames = cx__default["default"](["".concat(blockClass, "__actions-container"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__actions-container--condensed"), condensedActions)]);
-  var mainPanelClassNames = cx__default["default"]([blockClass, className, "".concat(blockClass), "".concat(blockClass, "--").concat(size), _rollupPluginBabelHelpers.defineProperty(_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, "--animated-title"), doAnimateTitle), "".concat(blockClass, "--has-overlay"), includeOverlay)]);
+  var mainPanelClassNames = cx__default["default"]([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 renderTitle = function renderTitle() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       className: cx__default["default"]("".concat(blockClass, "__title"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
@@ -403,10 +422,10 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
   var renderMain = function renderMain() {
     return /*#__PURE__*/React__default["default"].createElement("div", {
       ref: innerContentRef,
-      className: cx__default["default"]("".concat(blockClass, "__inner-content"), _rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--scrolls"), !doAnimateTitle))
+      onScroll: handleScroll,
+      className: cx__default["default"]("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
     }, children);
   };
-  useResizeObserver.useResizeObserver(sidePanelRef, handleResize, [open]);
   return /*#__PURE__*/React__default["default"].createElement(framerMotion.AnimatePresence, null, open && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(framerMotion.motion.div, _rollupPluginBabelHelpers["extends"]({}, devtools.getDevtoolsProps(componentName), rest, {
     id: id,
     className: mainPanelClassNames,
@@ -424,11 +443,8 @@ exports.SidePanel = /*#__PURE__*/React__default["default"].forwardRef(function (
       shouldReduceMotion: shouldReduceMotion
     },
     onKeyDown: keyDownListener
-  }), doAnimateTitle ? /*#__PURE__*/React__default["default"].createElement("div", {
-    ref: animatedScrollRef,
-    className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
-  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
-    actions: actions,
+  }), /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default["default"].createElement(MotionActionSet, {
+    actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,
     size: size === 'xs' ? 'sm' : size,
     custom: shouldReduceMotion,

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.d.ts

@@ -1,5 +1,26 @@
 /**
- * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
+ * Copyright IBM Corp. 2023, 2024
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
  */
-export const SteppedAnimatedMedia: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
 import React from 'react';
+interface SteppedAnimatedMediaProps {
+    /**
+     * Optional class name for this component.
+     */
+    className?: string;
+    /**
+     * The file path(s) to json formatted Lottie animation files.
+     */
+    filePaths: string[] | undefined;
+    /**
+     * Which animation step from the filePaths array to play.
+     */
+    playStep?: number;
+}
+/**
+ * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
+ */
+export declare const SteppedAnimatedMedia: React.ForwardRefExoticComponent<SteppedAnimatedMediaProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -37,7 +37,6 @@ var componentName = 'SteppedAnimatedMedia';
 var defaults = {
   playStep: 0
 };
-
 /**
  * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
  */
@@ -52,8 +51,9 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default["default"].forwardRef(fun
     jsonData = _useState2[0],
     setJsonData = _useState2[1];
   var animRef = React.useRef();
-  var backupRef = React.useRef();
+  var backupRef = React.useRef(null);
   var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
+  var localRefValue = localRef.current;
   // load animation source
   React.useEffect(function () {
     var isJsonFile = function isJsonFile(filePath) {
@@ -100,11 +100,11 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default["default"].forwardRef(fun
   React.useEffect(function () {
     var _window;
     var prefersReducedMotion = (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;
-    if (localRef.current) {
+    if (localRefValue) {
       var _animRef$current, _animRef$current2, _animRef$current3;
       (_animRef$current = animRef.current) === null || _animRef$current === void 0 || _animRef$current.destroy();
       animRef.current = lottie__default["default"].loadAnimation({
-        container: localRef.current,
+        container: localRefValue,
         renderer: 'svg',
         animationData: jsonData[clamp__default["default"](playStep, 0, jsonData.length - 1)],
         loop: false,
@@ -119,7 +119,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default["default"].forwardRef(fun
       var _animRef$current4;
       return (_animRef$current4 = animRef.current) === null || _animRef$current4 === void 0 ? void 0 : _animRef$current4.destroy();
     };
-  }, [jsonData, localRef, playStep]);
+  }, [jsonData, localRefValue, playStep]);
   if (!jsonData) {
     return null;
   }
@@ -138,6 +138,7 @@ SteppedAnimatedMedia.propTypes = {
   /**
    * The file path(s) to json formatted Lottie animation files.
    */
+  /**@ts-ignore*/
   filePaths: index["default"].arrayOf(index["default"].string).isRequired,
   /**
    * Which animation step from the filePaths array to play.

package/lib/components/TagOverflow/TagOverflow.d.ts

@@ -0,0 +1,5 @@
+/**
+ * TODO: A description of the component.
+ */
+export let TagOverflow: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from 'react';