@carbon/ibm-products 2.54.0-canary.50 → 2.54.0-canary.52

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts

@@ -24,11 +24,16 @@ export interface CoachmarkOverlayElementsProps {
      * 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}`.
+     * * @deprecated please use the `renderMedia` prop
      */
     media?: {
         render?: () => ReactNode;
         filePaths?: string[];
     };
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: (params: any) => ReactNode;
     /**
      * The label for the Next button.
      */

package/es/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { Button } from '@carbon/react';
-import React__default, { useRef, useState, Children, useEffect } from 'react';
+import React__default, { useRef, useState, Children, useMemo, useEffect } from 'react';
 import { Carousel } from '../Carousel/Carousel.js';
 import '../Carousel/CarouselItem.js';
 import PropTypes from '../../_virtual/index.js';
@@ -20,7 +20,7 @@ import { pkg } from '../../settings.js';
 import '../Coachmark/Coachmark.js';
 import { useCoachmark } from '../Coachmark/utils/context.js';
 
-var _excluded = ["className", "children", "isVisible", "media", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
+var _excluded = ["className", "children", "isVisible", "media", "renderMedia", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--coachmark-overlay-elements");
@@ -53,6 +53,7 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
     _ref$isVisible = _ref.isVisible,
     isVisible = _ref$isVisible === void 0 ? defaults.isVisible : _ref$isVisible,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     _ref$nextButtonText = _ref.nextButtonText,
     nextButtonText = _ref$nextButtonText === void 0 ? defaults.nextButtonText : _ref$nextButtonText,
     _ref$previousButtonLa = _ref.previousButtonLabel,
@@ -71,6 +72,7 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
     currentProgStep = _useState4[0],
     _setCurrentProgStep = _useState4[1];
   var coachmark = useCoachmark();
+  var hasMedia = media || renderMedia;
   var setCurrentProgStep = function setCurrentProgStep(value) {
     if (currentProgStep > 0 && value === 0 && buttonFocusRef.current) {
       setTimeout(function () {
@@ -83,6 +85,11 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
   var numProgSteps = Children.count(children);
   var progStepFloor = 0;
   var progStepCeil = numProgSteps - 1;
+  var renderMediaContent = useMemo(function () {
+    return renderMedia === null || renderMedia === void 0 ? void 0 : renderMedia({
+      playStep: currentProgStep
+    });
+  }, [currentProgStep, renderMedia]);
   useEffect(function () {
     // On mount, one of the two primary buttons ("next" or "close")
     // will be rendered and must have focus. (a11y)
@@ -111,11 +118,13 @@ var CoachmarkOverlayElements = /*#__PURE__*/React__default.forwardRef(function (
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-  }, getDevtoolsProps(componentName)), media && (media.render ? media.render() : /*#__PURE__*/React__default.createElement(SteppedAnimatedMedia, {
+  }, getDevtoolsProps(componentName)), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && media.render(), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React__default.createElement(SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__element-stepped-media"),
     filePaths: media.filePaths,
     playStep: currentProgStep
-  })), numProgSteps === 1 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children, closeButtonLabel && /*#__PURE__*/React__default.createElement("div", {
+  }), hasMedia && renderMedia && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__element-stepped-media")
+  }, renderMediaContent), numProgSteps === 1 ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, children, closeButtonLabel && /*#__PURE__*/React__default.createElement("div", {
     className: cx("".concat(blockClass, "__footer"), 'coachmark-carousel-controls')
   }, /*#__PURE__*/React__default.createElement(Button, _extends({
     size: "sm"
@@ -194,6 +203,7 @@ CoachmarkOverlayElements.propTypes = {
    * 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}`.
+   * @deprecated please use the `renderMedia` prop
    */
   /**@ts-ignore*/
   media: PropTypes.oneOfType([PropTypes.shape({
@@ -208,7 +218,11 @@ CoachmarkOverlayElements.propTypes = {
   /**
    * The label for the Previous button.
    */
-  previousButtonLabel: PropTypes.string
+  previousButtonLabel: PropTypes.string,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: PropTypes.func
 };
 
 export { CoachmarkOverlayElements };

package/es/components/CoachmarkStack/CoachmarkStackHome.d.ts

@@ -39,6 +39,10 @@ interface CoachmarkStackHomeProps {
      * @see {@link MEDIA_PROP_TYPE}.
      */
     media?: Media;
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: (params: any) => ReactNode;
     /**
      * The labels used to link to the stackable Coachmarks.
      */

package/es/components/CoachmarkStack/CoachmarkStackHome.js

@@ -17,9 +17,10 @@ import { pkg } from '../../settings.js';
 import { createPortal } from 'react-dom';
 import { CoachmarkHeader } from '../Coachmark/CoachmarkHeader.js';
 import { SteppedAnimatedMedia } from '../SteppedAnimatedMedia/SteppedAnimatedMedia.js';
+import { deprecateProp } from '../../global/js/utils/props-helper.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
-var _excluded = ["className", "description", "isOpen", "media", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
+var _excluded = ["className", "description", "isOpen", "media", "renderMedia", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -37,6 +38,7 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
     description = _ref.description,
     isOpen = _ref.isOpen,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     navLinkLabels = _ref.navLinkLabels,
     onClickNavItem = _ref.onClickNavItem,
     _onClose = _ref.onClose,
@@ -49,6 +51,7 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState2 = _slicedToArray(_useState, 2),
     linkFocusIndex = _useState2[0],
     setLinkFocusIndex = _useState2[1];
+  var hasMedia = media || renderMedia;
   useEffect(function () {
     setTimeout(function () {
       if (isOpen && buttonFocusRef.current) {
@@ -90,13 +93,17 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: "".concat(overlayClass, "__body")
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(overlayClass, "-element")
-  }, !media && /*#__PURE__*/React__default.createElement(Idea, {
+  }, !hasMedia && /*#__PURE__*/React__default.createElement(Idea, {
     size: 20,
     className: "".concat(blockClass, "__icon-idea")
-  }), media && (media.render ? media.render() : /*#__PURE__*/React__default.createElement(SteppedAnimatedMedia, {
-    className: "".concat(overlayClass, "__element-stepped-media"),
+  }), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && media.render(), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React__default.createElement(SteppedAnimatedMedia, {
+    className: "".concat(blockClass, "__element-stepped-media"),
     filePaths: media.filePaths,
     playStep: 0
+  }), hasMedia && renderMedia && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__element-stepped-media")
+  }, renderMedia({
+    playStep: 0
   })), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(overlayClass, "-element__content")
   }, title && /*#__PURE__*/React__default.createElement("h2", {
@@ -156,12 +163,13 @@ CoachmarkStackHome.propTypes = {
    * If a stepped animation is required, use `{filePaths}`.
    *
    * @see {@link MEDIA_PROP_TYPE}.
+   * @deprecated please use the `renderMedia` prop
    */
-  media: PropTypes.oneOfType([PropTypes.shape({
+  media: deprecateProp(PropTypes.oneOfType([PropTypes.shape({
     render: PropTypes.func
   }), PropTypes.shape({
     filePaths: PropTypes.arrayOf(PropTypes.string)
-  })]),
+  })]), ''),
   /**
    * The labels used to link to the stackable Coachmarks.
    */
@@ -185,6 +193,10 @@ CoachmarkStackHome.propTypes = {
    * element is hidden or component is unmounted, the CoachmarkStackHome will disappear.
    */
   portalTarget: PropTypes.string,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: PropTypes.func,
   /**
    * The title of the Coachmark.
    */

package/es/components/InlineTip/InlineTip.d.ts

@@ -51,8 +51,13 @@ export interface InlineTipProps {
      * - If a stepped animation is required, use `{filePaths}`.
      *
      * Enabling `media` disables the `collapsible` feature.
+     * @deprecated please use the `renderMedia` prop
      */
     media?: MediaType;
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: () => ReactNode;
     /**
      * Set to `true` to arrange the information in a format
      * that is easier to read in a limited space.

package/es/components/InlineTip/InlineTip.js

@@ -18,7 +18,7 @@ import { pkg } from '../../settings.js';
 import uuidv4 from '../../global/js/utils/uuidv4.js';
 
 var _Close, _Idea, _Crossroads;
-var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
+var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "renderMedia", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--inline-tip");
@@ -56,6 +56,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$expandButtonLabe = _ref.expandButtonLabel,
     expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     _ref$narrow = _ref.narrow,
     narrow = _ref$narrow === void 0 ? defaults.narrow : _ref$narrow,
     onClick = _ref.onClick,
@@ -66,6 +67,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     _ref$withLeftGutter = _ref.withLeftGutter,
     withLeftGutter = _ref$withLeftGutter === void 0 ? defaults.withLeftGutter : _ref$withLeftGutter,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var hasMedia = renderMedia || media;
   var _useState = useState(collapsible),
     _useState2 = _slicedToArray(_useState, 2),
     isCollapsed = _useState2[0],
@@ -75,7 +77,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     return getComponentText(React__default.Children.toArray(children));
   }, [children]);
   var childrenToRender = children;
-  if (!media && collapsible && isCollapsed) {
+  if (!hasMedia && collapsible && isCollapsed) {
     childrenToRender = /*#__PURE__*/React__default.createElement("p", {
       className: "".concat(blockClass, "__preview-text")
     }, previewText);
@@ -87,7 +89,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, [collapsible]);
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     "aria-labelledby": labelId,
-    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), media && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
+    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), hasMedia && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
     ref: ref,
     role: "complementary"
   }, getDevtoolsProps(componentName)), /*#__PURE__*/React__default.createElement("div", {
@@ -100,7 +102,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: "lg"
   }, _Close || (_Close = /*#__PURE__*/React__default.createElement(Close, {
     size: 16
-  })))), (!media && narrow || !narrow) && /*#__PURE__*/React__default.createElement("div", {
+  })))), (!hasMedia && narrow || !narrow) && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__icon-idea"),
     tabIndex: -1
   }, _Idea || (_Idea = /*#__PURE__*/React__default.createElement(Idea, {
@@ -116,7 +118,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__secondary-btn")
   }, action)), (collapsible || tertiaryButtonLabel) && /*#__PURE__*/React__default.createElement("footer", {
     className: "".concat(blockClass, "__footer")
-  }, collapsible && !media && /*#__PURE__*/React__default.createElement(Button, {
+  }, collapsible && !hasMedia && /*#__PURE__*/React__default.createElement(Button, {
     className: "".concat(blockClass, "__toggle-btn"),
     kind: "ghost",
     size: "md",
@@ -135,12 +137,14 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         size: 16
       }));
     }
-  }, tertiaryButtonLabel))), media && (media.render ? /*#__PURE__*/React__default.createElement("div", {
+  }, tertiaryButtonLabel))), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__media")
-  }, media.render()) : /*#__PURE__*/React__default.createElement(SteppedAnimatedMedia, {
+  }, media.render()), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React__default.createElement(SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__media"),
     filePaths: media.filePaths
-  })));
+  }), hasMedia && renderMedia && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, renderMedia()));
 });
 InlineTip = pkg.checkComponentEnabled(InlineTip, componentName);
 InlineTip.displayName = componentName;
@@ -186,6 +190,7 @@ InlineTip.propTypes = {
    * - If a stepped animation is required, use `{filePaths}`.
    *
    * Enabling `media` disables the `collapsible` feature.
+   * @deprecated please use the `renderMedia` prop
    */
   /**@ts-ignore*/
   media: PropTypes.oneOfType([PropTypes.shape({
@@ -206,6 +211,10 @@ InlineTip.propTypes = {
    * Function to call when the InlineTip is closed via the "X" button.
    */
   onClose: PropTypes.func,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: PropTypes.func,
   /**
    * 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.

package/es/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -43,6 +43,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default.forwardRef(function (_ref
   var backupRef = useRef(null);
   var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
   var localRefValue = localRef.current;
+  var filePathStr = filePaths === null || filePaths === void 0 ? void 0 : filePaths.join(); //converting the array to string will avoid unwanted useEffect trigger.
   // load animation source
   useEffect(function () {
     var isJsonFile = function isJsonFile(filePath) {
@@ -85,7 +86,8 @@ var SteppedAnimatedMedia = /*#__PURE__*/React__default.forwardRef(function (_ref
       return _loadArtifact.apply(this, arguments);
     }
     loadArtifact();
-  }, [filePaths]);
+    // eslint-disable-next-line
+  }, [filePathStr]);
   useEffect(function () {
     var _window;
     var prefersReducedMotion = (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.d.ts

@@ -24,11 +24,16 @@ export interface CoachmarkOverlayElementsProps {
      * 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}`.
+     * * @deprecated please use the `renderMedia` prop
      */
     media?: {
         render?: () => ReactNode;
         filePaths?: string[];
     };
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: (params: any) => ReactNode;
     /**
      * The label for the Next button.
      */

package/lib/components/CoachmarkOverlayElements/CoachmarkOverlayElements.js

@@ -22,7 +22,7 @@ var settings = require('../../settings.js');
 require('../Coachmark/Coachmark.js');
 var context = require('../Coachmark/utils/context.js');
 
-var _excluded = ["className", "children", "isVisible", "media", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
+var _excluded = ["className", "children", "isVisible", "media", "renderMedia", "nextButtonText", "previousButtonLabel", "closeButtonLabel"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--coachmark-overlay-elements");
@@ -55,6 +55,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     _ref$isVisible = _ref.isVisible,
     isVisible = _ref$isVisible === void 0 ? defaults.isVisible : _ref$isVisible,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     _ref$nextButtonText = _ref.nextButtonText,
     nextButtonText = _ref$nextButtonText === void 0 ? defaults.nextButtonText : _ref$nextButtonText,
     _ref$previousButtonLa = _ref.previousButtonLabel,
@@ -73,6 +74,7 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
     currentProgStep = _useState4[0],
     _setCurrentProgStep = _useState4[1];
   var coachmark = context.useCoachmark();
+  var hasMedia = media || renderMedia;
   var setCurrentProgStep = function setCurrentProgStep(value) {
     if (currentProgStep > 0 && value === 0 && buttonFocusRef.current) {
       setTimeout(function () {
@@ -85,6 +87,11 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
   var numProgSteps = React.Children.count(children);
   var progStepFloor = 0;
   var progStepCeil = numProgSteps - 1;
+  var renderMediaContent = React.useMemo(function () {
+    return renderMedia === null || renderMedia === void 0 ? void 0 : renderMedia({
+      playStep: currentProgStep
+    });
+  }, [currentProgStep, renderMedia]);
   React.useEffect(function () {
     // On mount, one of the two primary buttons ("next" or "close")
     // will be rendered and must have focus. (a11y)
@@ -113,11 +120,13 @@ exports.CoachmarkOverlayElements = /*#__PURE__*/React.forwardRef(function (_ref,
       // example: [`${blockClass}__here-if-small`]: size === 'sm',
     }),
     ref: ref
-  }, devtools.getDevtoolsProps(componentName)), media && (media.render ? media.render() : /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
+  }, devtools.getDevtoolsProps(componentName)), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && media.render(), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__element-stepped-media"),
     filePaths: media.filePaths,
     playStep: currentProgStep
-  })), numProgSteps === 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, children, closeButtonLabel && /*#__PURE__*/React.createElement("div", {
+  }), hasMedia && renderMedia && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__element-stepped-media")
+  }, renderMediaContent), numProgSteps === 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, children, closeButtonLabel && /*#__PURE__*/React.createElement("div", {
     className: cx("".concat(blockClass, "__footer"), 'coachmark-carousel-controls')
   }, /*#__PURE__*/React.createElement(react.Button, _rollupPluginBabelHelpers.extends({
     size: "sm"
@@ -196,6 +205,7 @@ exports.CoachmarkOverlayElements.propTypes = {
    * 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}`.
+   * @deprecated please use the `renderMedia` prop
    */
   /**@ts-ignore*/
   media: index.default.oneOfType([index.default.shape({
@@ -210,5 +220,9 @@ exports.CoachmarkOverlayElements.propTypes = {
   /**
    * The label for the Previous button.
    */
-  previousButtonLabel: index.default.string
+  previousButtonLabel: index.default.string,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: index.default.func
 };

package/lib/components/CoachmarkStack/CoachmarkStackHome.d.ts

@@ -39,6 +39,10 @@ interface CoachmarkStackHomeProps {
      * @see {@link MEDIA_PROP_TYPE}.
      */
     media?: Media;
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: (params: any) => ReactNode;
     /**
      * The labels used to link to the stackable Coachmarks.
      */

package/lib/components/CoachmarkStack/CoachmarkStackHome.js

@@ -19,9 +19,10 @@ var settings = require('../../settings.js');
 var reactDom = require('react-dom');
 var CoachmarkHeader = require('../Coachmark/CoachmarkHeader.js');
 var SteppedAnimatedMedia = require('../SteppedAnimatedMedia/SteppedAnimatedMedia.js');
+var propsHelper = require('../../global/js/utils/props-helper.js');
 var useIsomorphicEffect = require('../../global/js/hooks/useIsomorphicEffect.js');
 
-var _excluded = ["className", "description", "isOpen", "media", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
+var _excluded = ["className", "description", "isOpen", "media", "renderMedia", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -39,6 +40,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     description = _ref.description,
     isOpen = _ref.isOpen,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     navLinkLabels = _ref.navLinkLabels,
     onClickNavItem = _ref.onClickNavItem,
     _onClose = _ref.onClose,
@@ -51,6 +53,7 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     linkFocusIndex = _useState2[0],
     setLinkFocusIndex = _useState2[1];
+  var hasMedia = media || renderMedia;
   React.useEffect(function () {
     setTimeout(function () {
       if (isOpen && buttonFocusRef.current) {
@@ -92,13 +95,17 @@ exports.CoachmarkStackHome = /*#__PURE__*/React.forwardRef(function (_ref, ref)
     className: "".concat(overlayClass, "__body")
   }, /*#__PURE__*/React.createElement("div", {
     className: "".concat(overlayClass, "-element")
-  }, !media && /*#__PURE__*/React.createElement(icons.Idea, {
+  }, !hasMedia && /*#__PURE__*/React.createElement(icons.Idea, {
     size: 20,
     className: "".concat(blockClass, "__icon-idea")
-  }), media && (media.render ? media.render() : /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
-    className: "".concat(overlayClass, "__element-stepped-media"),
+  }), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && media.render(), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
+    className: "".concat(blockClass, "__element-stepped-media"),
     filePaths: media.filePaths,
     playStep: 0
+  }), hasMedia && renderMedia && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__element-stepped-media")
+  }, renderMedia({
+    playStep: 0
   })), /*#__PURE__*/React.createElement("div", {
     className: "".concat(overlayClass, "-element__content")
   }, title && /*#__PURE__*/React.createElement("h2", {
@@ -158,12 +165,13 @@ exports.CoachmarkStackHome.propTypes = {
    * If a stepped animation is required, use `{filePaths}`.
    *
    * @see {@link MEDIA_PROP_TYPE}.
+   * @deprecated please use the `renderMedia` prop
    */
-  media: index.default.oneOfType([index.default.shape({
+  media: propsHelper.deprecateProp(index.default.oneOfType([index.default.shape({
     render: index.default.func
   }), index.default.shape({
     filePaths: index.default.arrayOf(index.default.string)
-  })]),
+  })]), ''),
   /**
    * The labels used to link to the stackable Coachmarks.
    */
@@ -187,6 +195,10 @@ exports.CoachmarkStackHome.propTypes = {
    * element is hidden or component is unmounted, the CoachmarkStackHome will disappear.
    */
   portalTarget: index.default.string,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: index.default.func,
   /**
    * The title of the Coachmark.
    */

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

@@ -51,8 +51,13 @@ export interface InlineTipProps {
      * - If a stepped animation is required, use `{filePaths}`.
      *
      * Enabling `media` disables the `collapsible` feature.
+     * @deprecated please use the `renderMedia` prop
      */
     media?: MediaType;
+    /**
+     * Optional prop to render any media like images or any animated media.
+     */
+    renderMedia?: () => ReactNode;
     /**
      * Set to `true` to arrange the information in a format
      * that is easier to read in a limited space.

package/lib/components/InlineTip/InlineTip.js

@@ -20,7 +20,7 @@ var settings = require('../../settings.js');
 var uuidv4 = require('../../global/js/utils/uuidv4.js');
 
 var _Close, _Idea, _Crossroads;
-var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
+var _excluded = ["action", "children", "className", "closeIconDescription", "collapsible", "collapseButtonLabel", "expandButtonLabel", "media", "renderMedia", "narrow", "onClick", "onClose", "tertiaryButtonLabel", "title", "withLeftGutter"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--inline-tip");
@@ -58,6 +58,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$expandButtonLabe = _ref.expandButtonLabel,
     expandButtonLabel = _ref$expandButtonLabe === void 0 ? defaults.expandButtonLabel : _ref$expandButtonLabe,
     media = _ref.media,
+    renderMedia = _ref.renderMedia,
     _ref$narrow = _ref.narrow,
     narrow = _ref$narrow === void 0 ? defaults.narrow : _ref$narrow,
     onClick = _ref.onClick,
@@ -68,6 +69,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     _ref$withLeftGutter = _ref.withLeftGutter,
     withLeftGutter = _ref$withLeftGutter === void 0 ? defaults.withLeftGutter : _ref$withLeftGutter,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var hasMedia = renderMedia || media;
   var _useState = React.useState(collapsible),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
     isCollapsed = _useState2[0],
@@ -77,7 +79,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return utils.getComponentText(React.Children.toArray(children));
   }, [children]);
   var childrenToRender = children;
-  if (!media && collapsible && isCollapsed) {
+  if (!hasMedia && collapsible && isCollapsed) {
     childrenToRender = /*#__PURE__*/React.createElement("p", {
       className: "".concat(blockClass, "__preview-text")
     }, previewText);
@@ -89,7 +91,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, [collapsible]);
   return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
     "aria-labelledby": labelId,
-    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), media && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
+    className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), hasMedia && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
     ref: ref,
     role: "complementary"
   }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
@@ -102,7 +104,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     size: "lg"
   }, _Close || (_Close = /*#__PURE__*/React.createElement(icons.Close, {
     size: 16
-  })))), (!media && narrow || !narrow) && /*#__PURE__*/React.createElement("div", {
+  })))), (!hasMedia && narrow || !narrow) && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__icon-idea"),
     tabIndex: -1
   }, _Idea || (_Idea = /*#__PURE__*/React.createElement(icons.Idea, {
@@ -118,7 +120,7 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__secondary-btn")
   }, action)), (collapsible || tertiaryButtonLabel) && /*#__PURE__*/React.createElement("footer", {
     className: "".concat(blockClass, "__footer")
-  }, collapsible && !media && /*#__PURE__*/React.createElement(react.Button, {
+  }, collapsible && !hasMedia && /*#__PURE__*/React.createElement(react.Button, {
     className: "".concat(blockClass, "__toggle-btn"),
     kind: "ghost",
     size: "md",
@@ -137,12 +139,14 @@ exports.InlineTip = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
         size: 16
       }));
     }
-  }, tertiaryButtonLabel))), media && (media.render ? /*#__PURE__*/React.createElement("div", {
+  }, tertiaryButtonLabel))), hasMedia && (media === null || media === void 0 ? void 0 : media.render) && /*#__PURE__*/React.createElement("div", {
     className: "".concat(blockClass, "__media")
-  }, media.render()) : /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
+  }, media.render()), hasMedia && (media === null || media === void 0 ? void 0 : media.filePaths) && /*#__PURE__*/React.createElement(SteppedAnimatedMedia.SteppedAnimatedMedia, {
     className: "".concat(blockClass, "__media"),
     filePaths: media.filePaths
-  })));
+  }), hasMedia && renderMedia && /*#__PURE__*/React.createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, renderMedia()));
 });
 exports.InlineTip = settings.pkg.checkComponentEnabled(exports.InlineTip, componentName);
 exports.InlineTip.displayName = componentName;
@@ -188,6 +192,7 @@ exports.InlineTip.propTypes = {
    * - If a stepped animation is required, use `{filePaths}`.
    *
    * Enabling `media` disables the `collapsible` feature.
+   * @deprecated please use the `renderMedia` prop
    */
   /**@ts-ignore*/
   media: index.default.oneOfType([index.default.shape({
@@ -208,6 +213,10 @@ exports.InlineTip.propTypes = {
    * Function to call when the InlineTip is closed via the "X" button.
    */
   onClose: index.default.func,
+  /**
+   * Optional prop to render any media like images or animated media.
+   */
+  renderMedia: index.default.func,
   /**
    * 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.

package/lib/components/SteppedAnimatedMedia/SteppedAnimatedMedia.js

@@ -45,6 +45,7 @@ var SteppedAnimatedMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var backupRef = React.useRef(null);
   var localRef = ref !== null && ref !== void 0 ? ref : backupRef;
   var localRefValue = localRef.current;
+  var filePathStr = filePaths === null || filePaths === void 0 ? void 0 : filePaths.join(); //converting the array to string will avoid unwanted useEffect trigger.
   // load animation source
   React.useEffect(function () {
     var isJsonFile = function isJsonFile(filePath) {
@@ -87,7 +88,8 @@ var SteppedAnimatedMedia = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       return _loadArtifact.apply(this, arguments);
     }
     loadArtifact();
-  }, [filePaths]);
+    // eslint-disable-next-line
+  }, [filePathStr]);
   React.useEffect(function () {
     var _window;
     var prefersReducedMotion = (_window = window) !== null && _window !== void 0 && _window.matchMedia ? window.matchMedia('(prefers-reduced-motion: reduce)').matches : true;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibm-products",
   "description": "Carbon for IBM Products",
-  "version": "2.54.0-canary.50+0da237232",
+  "version": "2.54.0-canary.52+d8c705180",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -96,7 +96,7 @@
   "dependencies": {
     "@babel/runtime": "^7.23.9",
     "@carbon/feature-flags": "^0.24.0",
-    "@carbon/ibm-products-styles": "^2.50.0-canary.50+0da237232",
+    "@carbon/ibm-products-styles": "^2.50.0-canary.52+d8c705180",
     "@carbon/telemetry": "^0.1.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^7.0.0",
@@ -120,5 +120,5 @@
     "react": "^16.8.6 || ^17.0.1 || ^18.2.0",
     "react-dom": "^16.8.6 || ^17.0.1 || ^18.2.0"
   },
-  "gitHead": "0da2372321bb498d78a6beed0e21f2c26626b4a8"
+  "gitHead": "d8c70518087e7e41fdf1aa45cbbf692389058d56"
 }