@carbon/ibm-products 2.64.0 → 2.65.0

package/lib/components/InterstitialScreen/InterstitialScreen.js

@@ -10,21 +10,18 @@
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var react = require('@carbon/react');
 var React = require('react');
-var icons = require('@carbon/react/icons');
-var Carousel = require('../Carousel/Carousel.js');
-require('../Carousel/CarouselItem.js');
 var index = require('../../_virtual/index.js');
 var cx = require('classnames');
-var clamp = require('../../global/js/utils/clamp.js');
 var devtools = require('../../global/js/utils/devtools.js');
 var settings = require('../../settings.js');
+var InterstitialScreenHeader = require('./InterstitialScreenHeader.js');
+var InterstitialScreenBody = require('./InterstitialScreenBody.js');
+var InterstitialScreenFooter = require('./InterstitialScreenFooter.js');
 
-var _excluded = ["children", "className", "closeIconDescription", "domainName", "hideProgressIndicator", "interstitialAriaLabel", "isFullScreen", "isOpen", "renderMedia", "breakpointsWithMedia", "nextButtonLabel", "onClose", "previousButtonLabel", "productName", "headerClassName", "headerTitle", "startButtonLabel", "skipButtonLabel"];
+var _excluded = ["children", "className", "interstitialAriaLabel", "isFullScreen", "isOpen", "onClose"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(settings.pkg.prefix, "--interstitial-screen");
-var headerBlockClass = "".concat(blockClass, "--internal-header");
-var bodyBlockClass = "".concat(blockClass, "--internal-body");
 var componentName = 'InterstitialScreen';
 
 // NOTE: the component SCSS is not imported here: it is rolled up separately.
@@ -38,21 +35,12 @@ var componentName = 'InterstitialScreen';
 // Default values should be provided when the component needs to make a choice
 // or assumption when a prop is not supplied.
 
-// Default values for props
-var defaults = {
-  closeIconDescription: 'Close',
-  domainName: '',
-  hideProgressIndicator: false,
-  interstitialAriaLabel: 'Interstitial screen',
-  isFullScreen: false,
-  isOpen: false,
-  nextButtonLabel: 'Next',
-  onClose: function onClose() {},
-  previousButtonLabel: 'Back',
-  productName: '',
-  skipButtonLabel: '',
-  startButtonLabel: 'Get started'
-};
+// Define the type for InterstitialScreen, extending it to include Header
+
+var InterstitialScreenContext = /*#__PURE__*/React.createContext({
+  progStep: 0,
+  stepCount: 0
+});
 /**
  * InterstitialScreen can be a full page or an overlay, and are
  * shown on the first time a user accesses a new experience
@@ -60,37 +48,15 @@ var defaults = {
  * newly purchased capability is presented).
  */
 exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var _h, _strong, _h2;
   var children = props.children,
     className = props.className,
-    _props$closeIconDescr = props.closeIconDescription,
-    closeIconDescription = _props$closeIconDescr === void 0 ? defaults.closeIconDescription : _props$closeIconDescr,
-    _props$domainName = props.domainName,
-    domainName = _props$domainName === void 0 ? defaults.domainName : _props$domainName,
-    _props$hideProgressIn = props.hideProgressIndicator,
-    hideProgressIndicator = _props$hideProgressIn === void 0 ? defaults.hideProgressIndicator : _props$hideProgressIn,
     _props$interstitialAr = props.interstitialAriaLabel,
-    interstitialAriaLabel = _props$interstitialAr === void 0 ? defaults.interstitialAriaLabel : _props$interstitialAr,
+    interstitialAriaLabel = _props$interstitialAr === void 0 ? 'Interstitial screen' : _props$interstitialAr,
     _props$isFullScreen = props.isFullScreen,
-    isFullScreen = _props$isFullScreen === void 0 ? defaults.isFullScreen : _props$isFullScreen,
+    isFullScreen = _props$isFullScreen === void 0 ? false : _props$isFullScreen,
     _props$isOpen = props.isOpen,
-    isOpen = _props$isOpen === void 0 ? defaults.isOpen : _props$isOpen,
-    renderMedia = props.renderMedia,
-    breakpointsWithMedia = props.breakpointsWithMedia,
-    _props$nextButtonLabe = props.nextButtonLabel,
-    nextButtonLabel = _props$nextButtonLabe === void 0 ? defaults.nextButtonLabel : _props$nextButtonLabe,
-    _props$onClose = props.onClose,
-    onClose = _props$onClose === void 0 ? defaults.onClose : _props$onClose,
-    _props$previousButton = props.previousButtonLabel,
-    previousButtonLabel = _props$previousButton === void 0 ? defaults.previousButtonLabel : _props$previousButton,
-    _props$productName = props.productName,
-    productName = _props$productName === void 0 ? defaults.productName : _props$productName,
-    headerClassName = props.headerClassName,
-    headerTitle = props.headerTitle,
-    _props$startButtonLab = props.startButtonLabel,
-    startButtonLabel = _props$startButtonLab === void 0 ? defaults.startButtonLabel : _props$startButtonLab,
-    _props$skipButtonLabe = props.skipButtonLabel,
-    skipButtonLabel = _props$skipButtonLabe === void 0 ? defaults.skipButtonLabel : _props$skipButtonLabe,
+    isOpen = _props$isOpen === void 0 ? false : _props$isOpen,
+    onClose = props.onClose,
     rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
   var backupRef = React.useRef(null);
   var _forwardedRef = ref || backupRef;
@@ -105,47 +71,29 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (props, ref)
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
     progStep = _useState4[0],
     setProgStep = _useState4[1];
-  var childArray = React.Children.toArray(children);
-  var isMultiStep = childArray.length > 1;
   var bodyScrollRef = React.useRef(null);
-  var mediaBreakpoints = {
-    xlg: (breakpointsWithMedia === null || breakpointsWithMedia === void 0 ? void 0 : breakpointsWithMedia.xlg) || 0,
-    lg: (breakpointsWithMedia === null || breakpointsWithMedia === void 0 ? void 0 : breakpointsWithMedia.lg) || 0,
-    md: 0,
-    sm: 0
-  };
-  var contentBreakpoints = {
-    xlg: 16 - mediaBreakpoints.xlg,
-    lg: 16 - mediaBreakpoints.lg,
-    md: 8,
-    sm: 4
-  };
+  var _useState5 = React.useState(0),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+    stepCount = _useState6[0],
+    setStepCount = _useState6[1];
+  var _useState7 = React.useState({
+      skip: false,
+      back: false,
+      next: false,
+      start: false
+    }),
+    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+    disableButtonConfig = _useState8[0],
+    setDisableButtonConfig = _useState8[1];
   var variantClass = isFullScreen ? "".concat(blockClass, "--full-screen") : "".concat(blockClass, "--modal");
-  var progStepFloor = 0;
-  var progStepCeil = childArray.length - 1;
-  var handleClose = React.useCallback(function () {
+  var _useState9 = React.useState(null),
+    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+    bodyChildrenData = _useState10[0],
+    setBodyChildrenData = _useState10[1];
+  var handleClose = React.useCallback(function (actionName) {
     setProgStep(0);
-    onClose();
+    onClose === null || onClose === void 0 || onClose(actionName !== null && actionName !== void 0 ? actionName : 'close');
   }, [onClose]);
-  var scrollBodyToTop = function scrollBodyToTop() {
-    var _bodyScrollRef$curren, _bodyScrollRef$curren2;
-    (_bodyScrollRef$curren = bodyScrollRef.current) === null || _bodyScrollRef$curren === void 0 || (_bodyScrollRef$curren2 = _bodyScrollRef$curren.scroll) === null || _bodyScrollRef$curren2 === void 0 || _bodyScrollRef$curren2.call(_bodyScrollRef$curren, {
-      top: 0,
-      behavior: 'smooth'
-    });
-  };
-  var handleClickPrev = function handleClickPrev() {
-    var targetStep = clamp.clamp(progStep - 1, progStepFloor, progStepCeil);
-    scrollRef.current.scrollPrev();
-    scrollBodyToTop();
-    setProgStep(targetStep);
-  };
-  var handleClickNext = function handleClickNext() {
-    var targetStep = clamp.clamp(progStep + 1, progStepFloor, progStepCeil);
-    scrollRef.current.scrollNext();
-    scrollBodyToTop();
-    setProgStep(targetStep);
-  };
   React.useEffect(function () {
     var _startButtonRef$curre;
     if (!isOpen) {
@@ -165,7 +113,7 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (props, ref)
     var close = function close(e) {
       var key = e.key;
       if (key === 'Escape') {
-        handleClose();
+        handleClose('close');
       }
     };
     window.addEventListener('keydown', close);
@@ -173,14 +121,10 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (props, ref)
       return window.removeEventListener('keydown', close);
     };
   }, [handleClose]);
-  var stepSize = React.useMemo(function () {
-    return children && React.Children.count(children) > 1 ? parseFloat((1 / (React.Children.count(children) - 1)).toFixed(2)) : 0;
-  }, [children]);
   if (!isOpen) {
     return null;
   }
-  var domainProductDelimiter = domainName !== '' && productName !== '' ? ' | ' : '';
-  var renderModal = function renderModal(childElements) {
+  var renderModal = function renderModal() {
     return /*#__PURE__*/React.createElement(react.ComposedModal, _rollupPluginBabelHelpers.extends({}, rest, {
       preventCloseOnClickOutside: true,
       className: cx(blockClass,
@@ -192,27 +136,9 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (props, ref)
       open: isOpen,
       ref: _forwardedRef,
       "aria-label": interstitialAriaLabel
-    }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement(react.ModalHeader, {
-      className: cx(headerBlockClass, headerTitle && "".concat(headerBlockClass, "--has-title"), headerClassName),
-      iconDescription: closeIconDescription
-    }, headerTitle && (_h || (_h = /*#__PURE__*/React.createElement("h2", null, headerTitle))), !hideProgressIndicator && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--progress")
-    }, /*#__PURE__*/React.createElement(react.ProgressIndicator, {
-      vertical: false,
-      currentIndex: progStep
-    }, childArray.map(function (child, idx) {
-      if (/*#__PURE__*/React.isValidElement(child)) {
-        return /*#__PURE__*/React.createElement(react.ProgressStep, {
-          key: idx,
-          label: child.props.stepTitle || '',
-          translateWithId: child.props.translateWithId
-        });
-      }
-    })))), /*#__PURE__*/React.createElement(react.ModalBody, {
-      className: bodyBlockClass
-    }, childElements), /*#__PURE__*/React.createElement(react.ModalFooter, null, renderFooter()));
+    }, devtools.getDevtoolsProps(componentName)), children);
   };
-  var renderFullScreen = function renderFullScreen(childElements) {
+  var renderFullScreen = function renderFullScreen() {
     return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({}, rest, {
       className: cx(blockClass,
       // Apply the block class to the main HTML element
@@ -223,117 +149,42 @@ exports.InterstitialScreen = /*#__PURE__*/React.forwardRef(function (props, ref)
       "aria-label": interstitialAriaLabel,
       ref: ref
     }, devtools.getDevtoolsProps(componentName)), /*#__PURE__*/React.createElement("div", {
-      className: cx([_rollupPluginBabelHelpers.defineProperty({}, "".concat(blockClass, "--container"), isFullScreen)])
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--header")
-    }, domainName, domainProductDelimiter, _strong || (_strong = /*#__PURE__*/React.createElement("strong", null, productName))), /*#__PURE__*/React.createElement("header", {
-      className: cx(headerBlockClass, headerTitle && "".concat(headerBlockClass, "--has-title"), headerClassName)
-    }, headerTitle && (_h2 || (_h2 = /*#__PURE__*/React.createElement("h2", null, headerTitle))), !hideProgressIndicator && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--progress")
-    }, /*#__PURE__*/React.createElement(react.ProgressIndicator, {
-      vertical: false,
-      currentIndex: progStep
-    }, childArray.map(function (child, idx) {
-      if (/*#__PURE__*/React.isValidElement(child)) {
-        return /*#__PURE__*/React.createElement(react.ProgressStep, {
-          key: idx,
-          label: child.props.stepTitle || '',
-          translateWithId: child.props.translateWithId
-        });
-      }
-    })))), childElements, renderFooter()));
+      className: "".concat(blockClass, "--container")
+    }, children));
   };
-  var scrollToCurrentStep = function scrollToCurrentStep(scrollPercent) {
-    var currentStep = scrollPercent / stepSize;
-    setProgStep(Math.ceil(currentStep));
-  };
-  var renderBody = function renderBody() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "--body")),
-      ref: bodyScrollRef,
-      tabIndex: 0
-    }, renderMedia ? /*#__PURE__*/React.createElement(react.FlexGrid, {
-      fullWidth: true,
-      className: cx("".concat(blockClass, "--body-grid"))
-    }, /*#__PURE__*/React.createElement(react.Row, {
-      className: cx("".concat(blockClass, "--body-row"))
-    }, /*#__PURE__*/React.createElement(react.Column, {
-      xlg: contentBreakpoints.xlg,
-      lg: contentBreakpoints.lg,
-      md: contentBreakpoints.md,
-      sm: contentBreakpoints.sm
-    }, /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "--content"))
-    }, isMultiStep ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__carousel")
-    }, /*#__PURE__*/React.createElement(Carousel.Carousel, {
-      disableArrowScroll: true,
-      ref: scrollRef,
-      onScroll: scrollToCurrentStep
-    }, children)) : childArray[0])), renderMedia && /*#__PURE__*/React.createElement(react.Column, {
-      xlg: mediaBreakpoints.xlg,
-      lg: mediaBreakpoints.lg,
-      md: mediaBreakpoints.md,
-      sm: mediaBreakpoints.sm,
-      className: cx("".concat(blockClass, "--media-container"))
-    }, /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--media")
-    }, renderMedia && /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--stepped-animated-media")
-    }, renderMedia({
-      playStep: progStep
-    })))))) : /*#__PURE__*/React.createElement("div", {
-      className: cx("".concat(blockClass, "--content"))
-    }, isMultiStep ? /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "__carousel")
-    }, /*#__PURE__*/React.createElement(Carousel.Carousel, {
-      disableArrowScroll: true,
-      ref: scrollRef,
-      onScroll: scrollToCurrentStep
-    }, children)) : /*#__PURE__*/React.createElement("div", null, childArray[0])));
+  var handleGotoStep = function handleGotoStep(targetStep) {
+    setProgStep(targetStep);
+    scrollRef.current.scrollToView(targetStep);
+    scrollBodyToTop();
   };
-  var renderFooter = function renderFooter() {
-    return /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--footer")
-    }, isMultiStep && skipButtonLabel !== '' && /*#__PURE__*/React.createElement(react.Button, {
-      className: "".concat(blockClass, "--skip-btn"),
-      kind: "ghost",
-      size: "lg",
-      title: skipButtonLabel,
-      onClick: handleClose
-    }, skipButtonLabel), /*#__PURE__*/React.createElement("div", {
-      className: "".concat(blockClass, "--footer-controls")
-    }, isMultiStep && progStep > 0 && /*#__PURE__*/React.createElement(react.Button, {
-      className: "".concat(blockClass, "--prev-btn"),
-      kind: "secondary",
-      size: "lg",
-      title: previousButtonLabel,
-      onClick: handleClickPrev
-    }, previousButtonLabel), isMultiStep && progStep < progStepCeil && /*#__PURE__*/React.createElement(react.Button, {
-      className: "".concat(blockClass, "--next-btn"),
-      renderIcon: icons.ArrowRight,
-      ref: nextButtonRef,
-      size: "lg",
-      title: nextButtonLabel,
-      onClick: handleClickNext
-    }, nextButtonLabel), isMultiStep && progStep === progStepCeil && /*#__PURE__*/React.createElement(react.Button, {
-      className: "".concat(blockClass, "--start-btn"),
-      ref: startButtonRef,
-      renderIcon: icons.ArrowRight,
-      size: "lg",
-      title: startButtonLabel,
-      onClick: handleClose
-    }, startButtonLabel), !isMultiStep && /*#__PURE__*/React.createElement(react.Button, {
-      className: "".concat(blockClass, "--start-btn"),
-      ref: startButtonRef,
-      size: "lg",
-      title: startButtonLabel,
-      onClick: handleClose
-    }, startButtonLabel)));
+  var scrollBodyToTop = function scrollBodyToTop() {
+    var _bodyScrollRef$curren, _bodyScrollRef$curren2;
+    (_bodyScrollRef$curren = bodyScrollRef.current) === null || _bodyScrollRef$curren === void 0 || (_bodyScrollRef$curren2 = _bodyScrollRef$curren.scroll) === null || _bodyScrollRef$curren2 === void 0 || _bodyScrollRef$curren2.call(_bodyScrollRef$curren, {
+      top: 0,
+      behavior: 'smooth'
+    });
   };
-  return isFullScreen ? renderFullScreen(renderBody()) : renderModal(renderBody());
+  return /*#__PURE__*/React.createElement(InterstitialScreenContext.Provider, {
+    value: {
+      bodyChildrenData: bodyChildrenData,
+      setBodyChildrenData: setBodyChildrenData,
+      isFullScreen: isFullScreen,
+      handleClose: handleClose,
+      progStep: progStep,
+      setProgStep: setProgStep,
+      bodyScrollRef: bodyScrollRef,
+      scrollRef: scrollRef,
+      handleGotoStep: handleGotoStep,
+      stepCount: stepCount,
+      setStepCount: setStepCount,
+      disableButtonConfig: disableButtonConfig,
+      setDisableButtonConfig: setDisableButtonConfig
+    }
+  }, isFullScreen ? renderFullScreen() : renderModal());
 });
-
+exports.InterstitialScreen.Header = InterstitialScreenHeader.default;
+exports.InterstitialScreen.Body = InterstitialScreenBody.default;
+exports.InterstitialScreen.Footer = InterstitialScreenFooter.default;
 // Return a placeholder if not released and not enabled by feature flag
 exports.InterstitialScreen = settings.pkg.checkComponentEnabled(exports.InterstitialScreen, componentName);
 
@@ -345,14 +196,7 @@ exports.InterstitialScreen.displayName = componentName;
 // in alphabetical order (for consistency).
 // See https://www.npmjs.com/package/prop-types#usage.
 exports.InterstitialScreen.propTypes = {
-  /**
-   * Breakpoints are used to set the media content column size as well as the remainder for the main content areas column size. Medium and small breakpoints will be set to 0 internally to focus on the main content area.
-   */
-  breakpointsWithMedia: index.default.object,
-  /**
-   * Provide the contents of the InterstitialScreen.
-   */
-  children: index.default.node.isRequired,
+  children: index.default.node,
   /**
    * Provide an optional class to be applied to the containing node.
    */
@@ -361,22 +205,6 @@ exports.InterstitialScreen.propTypes = {
    * Tooltip text and aria label for the Close button icon.
    */
   closeIconDescription: index.default.string,
-  /**
-   * The domain this app belongs to, e.g. "IBM Cloud Pak".
-   */
-  domainName: index.default.string,
-  /**
-   * Provide an optional class to be applied to the <header> element >.
-   */
-  headerClassName: index.default.string,
-  /**
-   * Provide an optional class to be applied to the <header> element >.
-   */
-  headerTitle: index.default.string,
-  /**
-   * Optional parameter to hide the progress indicator when multiple steps are used.
-   */
-  hideProgressIndicator: index.default.bool,
   /**
    * The aria label applied to the Interstitial Screen component
    */
@@ -390,32 +218,10 @@ exports.InterstitialScreen.propTypes = {
    * Specifies whether the component is currently open.
    */
   isOpen: index.default.bool,
-  /**
-   * The label for the Next button.
-   */
-  nextButtonLabel: index.default.string,
   /**
    * Function to call when the close button is clicked.
    */
-  onClose: index.default.func,
-  /**
-   * The label for the Previous button.
-   */
-  previousButtonLabel: index.default.string,
-  /**
-   * The name of this app, e.g. "QRadar".
-   */
-  productName: index.default.string,
-  /**
-   * Optional prop to render any media like images or animated media.
-   */
-  renderMedia: index.default.func,
-  /**
-   * The label for the skip button.
-   */
-  skipButtonLabel: index.default.string,
-  /**
-   * The label for the start button.
-   */
-  startButtonLabel: index.default.string
+  onClose: index.default.func
 };
+
+exports.InterstitialScreenContext = InterstitialScreenContext;

package/lib/components/InterstitialScreen/InterstitialScreenBody.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp. 2024, 2025
+ *
+ * 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, { ReactElement, ReactNode } from 'react';
+import { disableButtonConfigType } from './InterstitialScreen';
+import { EnrichedChildren } from './InterstitialScreenHeader';
+type contentRendererArgs = {
+    handleGotoStep?: (value: number) => void;
+    progStep?: number;
+    disableActionButton: (value: disableButtonConfigType) => void;
+};
+export interface InterstitialScreenBodyProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * This is a required callback that has to return the content to render in the body section.
+     * It can be a single child or an array of children depending on your need
+     */
+    contentRenderer: (config: contentRendererArgs) => ReactElement<EnrichedChildren> | ReactNode;
+}
+declare const InterstitialScreenBody: React.ForwardRefExoticComponent<InterstitialScreenBodyProps & React.RefAttributes<HTMLDivElement>>;
+export default InterstitialScreenBody;

package/lib/components/InterstitialScreen/InterstitialScreenBody.js

@@ -0,0 +1,114 @@
+/**
+ * Copyright IBM Corp. 2020, 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var React = require('react');
+var index = require('../../_virtual/index.js');
+var InterstitialScreen = require('./InterstitialScreen.js');
+var react = require('@carbon/react');
+var settings = require('../../settings.js');
+var Carousel = require('../Carousel/Carousel.js');
+require('../Carousel/CarouselItem.js');
+
+var _excluded = ["className", "contentRenderer"];
+var InterstitialScreenBody = /*#__PURE__*/React.forwardRef(function (props) {
+  var _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    contentRenderer = props.contentRenderer,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(props, _excluded);
+  var blockClass = "".concat(settings.pkg.prefix, "--interstitial-screen");
+  var bodyBlockClass = "".concat(blockClass, "--internal-body");
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isMultiStep = _useState2[0],
+    setIsMultiStep = _useState2[1];
+  var _useContext = React.useContext(InterstitialScreen.InterstitialScreenContext),
+    setBodyChildrenData = _useContext.setBodyChildrenData,
+    bodyChildrenData = _useContext.bodyChildrenData,
+    isFullScreen = _useContext.isFullScreen,
+    setProgStep = _useContext.setProgStep,
+    bodyScrollRef = _useContext.bodyScrollRef,
+    scrollRef = _useContext.scrollRef,
+    handleGotoStep = _useContext.handleGotoStep,
+    progStep = _useContext.progStep,
+    setStepCount = _useContext.setStepCount,
+    disableButtonConfig = _useContext.disableButtonConfig,
+    setDisableButtonConfig = _useContext.setDisableButtonConfig;
+  var _useState3 = React.useState(-1),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    scrollPercent = _useState4[0],
+    setScrollPercent = _useState4[1];
+  React.useEffect(function () {
+    var _bodyContent = contentRenderer({
+      handleGotoStep: handleGotoStep,
+      progStep: progStep,
+      disableActionButton: disableActionButton
+    });
+    var isElement = /*#__PURE__*/React.isValidElement(_bodyContent);
+    var children = isElement ? _bodyContent.props.children : _bodyContent;
+
+    // Set body children data
+    setBodyChildrenData === null || setBodyChildrenData === void 0 || setBodyChildrenData(children);
+
+    // If the children is an array, treat it as a multiStep
+    if (isElement && Array.isArray(children)) {
+      var stepLength = children.length;
+      setIsMultiStep(!!stepLength);
+      setStepCount === null || setStepCount === void 0 || setStepCount(stepLength);
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [progStep]);
+  React.useEffect(function () {
+    if (scrollPercent !== -1) {
+      var stepSize = bodyChildrenData && bodyChildrenData.length > 1 ? parseFloat((1 / (bodyChildrenData.length - 1)).toFixed(2)) : 0;
+      var currentStep = scrollPercent / stepSize;
+      setProgStep === null || setProgStep === void 0 || setProgStep(Math.ceil(currentStep));
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [scrollPercent]);
+  var disableActionButton = function disableActionButton(config) {
+    setDisableButtonConfig === null || setDisableButtonConfig === void 0 || setDisableButtonConfig(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, disableButtonConfig), config));
+  };
+  var onScrollHandler = function onScrollHandler(scrollPercent) {
+    return setScrollPercent(scrollPercent);
+  };
+  var renderBody = function renderBody() {
+    return /*#__PURE__*/React.createElement("div", _rollupPluginBabelHelpers.extends({
+      className: "".concat(blockClass, "--body ").concat(className),
+      ref: bodyScrollRef
+    }, rest), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "--content")
+    }, isMultiStep ? /*#__PURE__*/React.createElement("div", {
+      className: "".concat(blockClass, "__carousel")
+    }, /*#__PURE__*/React.createElement(Carousel.Carousel, {
+      disableArrowScroll: true,
+      ref: scrollRef,
+      onScroll: onScrollHandler
+    }, bodyChildrenData)) : bodyChildrenData));
+  };
+  return isFullScreen ? renderBody() : /*#__PURE__*/React.createElement(react.ModalBody, {
+    className: bodyBlockClass
+  }, renderBody());
+});
+InterstitialScreenBody.propTypes = {
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className: index.default.string,
+  /**
+   * This is a required callback that has to return the content to render in the body section.
+   * It can be a single child or an array of children depending on your need
+   */
+  contentRenderer: index.default.func.isRequired
+};
+
+exports.default = InterstitialScreenBody;

package/lib/components/InterstitialScreen/InterstitialScreenFooter.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Copyright IBM Corp. 2024, 2025
+ *
+ * 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 from 'react';
+import { ActionType, disableButtonConfigType } from './InterstitialScreen';
+type actionButtonRendererArgs = {
+    handleGotoStep?: (value: number) => void;
+    progStep?: number;
+    stepCount?: number;
+    disableButtonConfig?: disableButtonConfigType;
+};
+export interface InterstitialScreenFooterProps {
+    /**
+     * Provide an optional class to be applied to the containing node.
+     */
+    className?: string;
+    /**
+     * The label for the Previous button.
+     */
+    previousButtonLabel?: string;
+    /**
+     * The label for the skip button.
+     */
+    skipButtonLabel?: string;
+    /**
+     * The label for the start button.
+     */
+    startButtonLabel?: string;
+    /**
+     * The label for the Next button.
+     */
+    nextButtonLabel?: string;
+    /**
+     * This is an optional callback prop that allows to render your custom footer action buttons.
+     * note: this is applicable when not using custom actionButtonRenderer
+     */
+    actionButtonRenderer?: (config: actionButtonRendererArgs) => React.ReactNode;
+    /**
+     * optional asynchronous callback on action button click
+     */
+    onAction?: (actionName: ActionType, config: actionButtonRendererArgs) => void;
+}
+declare const InterstitialScreenFooter: React.ForwardRefExoticComponent<InterstitialScreenFooterProps & React.RefAttributes<HTMLDivElement>>;
+export default InterstitialScreenFooter;