@carbon/ibm-products 2.34.0 → 2.35.0

package/es/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/es/components/InlineTip/InlineTip.js

@@ -35,9 +35,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
@@ -187,6 +187,7 @@ InlineTip.propTypes = {
    *
    * Enabling `media` disables the `collapsible` feature.
    */
+  /**@ts-ignore*/
   media: PropTypes.oneOfType([PropTypes.shape({
     render: PropTypes.func
   }), PropTypes.shape({

package/es/components/Nav/Nav.js

@@ -102,7 +102,7 @@ var Nav = /*#__PURE__*/React__default.forwardRef(function (_ref, 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/es/components/Nav/NavList.js

@@ -22,7 +22,7 @@ var defaults = {
   className: '',
   children: null,
   id: '',
-  isExpandedOnPageload: false,
+  isExpandedOnPageLoad: false,
   onItemClick: function onItemClick() {},
   onListClick: function onListClick() {},
   tabIndex: 0,
@@ -41,8 +41,8 @@ var NavList = /*#__PURE__*/React__default.forwardRef(function (_ref, 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,
@@ -53,7 +53,7 @@ var NavList = /*#__PURE__*/React__default.forwardRef(function (_ref, 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 = useState(isExpandedOnPageload),
+  var _useState = useState(isExpandedOnPageLoad),
     _useState2 = _slicedToArray(_useState, 2),
     open = _useState2[0],
     setOpen = _useState2[1];
@@ -65,7 +65,7 @@ var NavList = /*#__PURE__*/React__default.forwardRef(function (_ref, 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
   }, []);
 
@@ -99,7 +99,7 @@ var NavList = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   useImperativeHandle(ref, function () {
     return {
       close: close,
-      isExpandedOnPageload: isExpandedOnPageload
+      isExpandedOnPageLoad: isExpandedOnPageLoad
     };
   });
   var newChildren = React__default.Children.map(children, function (child, index) {
@@ -150,7 +150,7 @@ NavList.propTypes = {
   /** @type {string} ID of a list. */
   id: propTypesExports.string,
   /** @type {boolean} State of a list. */
-  isExpandedOnPageload: propTypesExports.bool,
+  isExpandedOnPageLoad: propTypesExports.bool,
   /** @type {boolean} Title of nav. */
   navigationItemTitle: propTypesExports.string,
   /** @type {Function} Click handler for an item. */

package/es/components/NotificationsPanel/NotificationsPanel.js

@@ -317,7 +317,7 @@ var NotificationsPanel = /*#__PURE__*/React__default.forwardRef(function (_ref,
     id: blockClass,
     className: cx(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/es/components/PageHeader/PageHeader.js

@@ -186,7 +186,7 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     checkUpdateVerticalSpace();
   };
   var handleCollapseToggle = function handleCollapseToggle() {
-    utilSetCollapsed(!fullyCollapsed, metrics.headerOffset, metrics.headerTopValue);
+    utilSetCollapsed(!fullyCollapsed, headerRef, metrics.headerOffset, metrics.headerTopValue);
   };
 
   // use effects
@@ -305,9 +305,9 @@ var PageHeader = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   };
   useEffect(function () {
     if (collapseHeader === true) {
-      utilSetCollapsed(collapseHeader, metrics.headerOffset, metrics.headerTopValue);
+      utilSetCollapsed(collapseHeader, headerRef, metrics.headerOffset, metrics.headerTopValue);
     }
-  }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue]);
+  }, [collapseHeader, metrics.headerOffset, metrics.headerTopValue, headerRef]);
   useResizeObserver(sizingContainerRef, handleResizeActionBarColumn);
   useResizeObserver(headerRef, handleResize);
 

package/es/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/es/components/PageHeader/PageHeaderUtils.js

@@ -139,16 +139,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(headerRef.current);
   if (collapse) {
-    window.scrollTo({
+    scrollableTarget.scrollTo({
       top: headerOffset - headerTopValue,
       behavior: 'smooth'
     });
   } else {
-    window.scrollTo({
+    scrollableTarget.scrollTo({
       top: 0,
       behavior: 'smooth'
     });

package/es/components/SidePanel/SidePanel.js

@@ -10,7 +10,6 @@ import React__default, { useState, useRef, useEffect, useCallback } from 'react'
 import { motion, useReducedMotion, AnimatePresence } from 'framer-motion';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
-import { useResizeObserver } from '../../global/js/hooks/useResizeObserver.js';
 import { moderate02 } from '@carbon/motion';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { allPropTypes } from '../../global/js/utils/props-helper.js';
@@ -110,14 +109,48 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     keyDownListener = _useFocus.keyDownListener;
   var panelRefValue = sidePanelRef.current;
   var shouldReduceMotion = useReducedMotion();
+
+  // Title animation on scroll related state
+  var _useState7 = useState(0),
+    _useState8 = _slicedToArray(_useState7, 2),
+    labelTextHeight = _useState8[0],
+    setLabelTextHeight = _useState8[1];
+  useEffect(function () {
+    if (open && !(titleRef !== null && titleRef !== void 0 && titleRef.current)) {
+      setDoAnimateTitle(false);
+    } else {
+      setDoAnimateTitle(animateTitle);
+    }
+  }, [animateTitle, open]);
+  var titleItemsStyles = 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]);
   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 = 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
   };
@@ -125,8 +158,8 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   // scroll panel to top going between steps
   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;
       }
@@ -149,9 +182,9 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   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
@@ -162,11 +195,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
 
       // 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);
@@ -180,20 +209,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   };
   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
   useEffect(function () {
@@ -202,7 +221,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
 
     // 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
   useEffect(function () {
@@ -301,7 +320,7 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     }
   }, [animationComplete, firstElement, open, selectorPrimaryFocus]);
   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(_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([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 renderTitle = function renderTitle() {
     return /*#__PURE__*/React__default.createElement("div", {
       className: cx("".concat(blockClass, "__title"), _defineProperty({}, "".concat(blockClass, "__title--no-label"), !labelTextRef.current)),
@@ -394,10 +413,10 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var renderMain = function renderMain() {
     return /*#__PURE__*/React__default.createElement("div", {
       ref: innerContentRef,
-      className: cx("".concat(blockClass, "__inner-content"), _defineProperty({}, "".concat(blockClass, "--scrolls"), !doAnimateTitle))
+      onScroll: handleScroll,
+      className: cx("".concat(blockClass, "__inner-content"), "".concat(blockClass, "--scrolls"), "".concat(!doAnimateTitle ? "".concat(blockClass, "__inner-content--no-animated-title") : ''))
     }, children);
   };
-  useResizeObserver(sidePanelRef, handleResize, [open]);
   return /*#__PURE__*/React__default.createElement(AnimatePresence, null, open && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(motion.div, _extends({}, getDevtoolsProps(componentName), rest, {
     id: id,
     className: mainPanelClassNames,
@@ -415,11 +434,8 @@ var SidePanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
       shouldReduceMotion: shouldReduceMotion
     },
     onKeyDown: keyDownListener
-  }), doAnimateTitle ? /*#__PURE__*/React__default.createElement("div", {
-    ref: animatedScrollRef,
-    className: "".concat(blockClass, "__animated-scroll-wrapper ").concat(blockClass, "--scrolls")
-  }, renderHeader(), renderMain()) : /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
-    actions: actions,
+  }), /*#__PURE__*/React__default.createElement(React__default.Fragment, null, renderHeader(), renderMain()), /*#__PURE__*/React__default.createElement(MotionActionSet, {
+    actions: actions !== null && actions !== void 0 ? actions : [],
     className: primaryActionContainerClassNames,
     size: size === 'xs' ? 'sm' : size,
     custom: shouldReduceMotion,

package/es/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/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -26,7 +26,6 @@ var componentName = 'SteppedAnimatedMedia';
 var defaults = {
   playStep: 0
 };
-
 /**
  * The SteppedAnimatedMedia is a Novice to Pro internal component and is not intended for general use.
  */
@@ -41,8 +40,9 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default.forwardRef(function (_ref
     jsonData = _useState2[0],
     setJsonData = _useState2[1];
   var animRef = useRef();
-  var backupRef = useRef();
+  var backupRef = useRef(null);
   var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
+  var localRefValue = localRef.current;
   // load animation source
   useEffect(function () {
     var isJsonFile = function isJsonFile(filePath) {
@@ -89,11 +89,11 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default.forwardRef(function (_ref
   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.loadAnimation({
-        container: localRef.current,
+        container: localRefValue,
         renderer: 'svg',
         animationData: jsonData[clamp(playStep, 0, jsonData.length - 1)],
         loop: false,
@@ -108,7 +108,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default.forwardRef(function (_ref
       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;
   }
@@ -127,6 +127,7 @@ SteppedAnimatedMedia.propTypes = {
   /**
    * The file path(s) to json formatted Lottie animation files.
    */
+  /**@ts-ignore*/
   filePaths: PropTypes.arrayOf(PropTypes.string).isRequired,
   /**
    * Which animation step from the filePaths array to play.

package/es/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';