@carbon/ibm-products 2.64.0 → 2.65.0-rc.0

package/es/components/Checklist/Checklist.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, defineProperty as _defineProperty } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { IconButton, Button } from '@carbon/react';
+import { Section, Heading, IconButton, Button } from '@carbon/react';
 import { Themes, Kinds } from './Checklist.types.js';
 import React__default, { useState, useRef, useEffect } from 'react';
 import { ChecklistChart } from './ChecklistChart.js';
@@ -112,8 +112,9 @@ var Checklist = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   useEffect(function () {
     setIsOpen(open);
   }, [open]);
-  return /*#__PURE__*/React__default.createElement("aside", _extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement(Section, _extends({}, rest, {
     "aria-label": checklistAriaLabel,
+    as: "aside",
     className: cx(blockClass,
     // Apply the block class to the main HTML element
     className, // Apply any supplied class names to the main HTML element.
@@ -128,9 +129,9 @@ var Checklist = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     value: chartValue
   }), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__titles")
-  }, title && /*#__PURE__*/React__default.createElement("h2", {
+  }, title && /*#__PURE__*/React__default.createElement(Heading, {
     className: "".concat(blockClass, "__title")
-  }, title), chartLabelAndValue && /*#__PURE__*/React__default.createElement("h3", {
+  }, title), chartLabelAndValue && /*#__PURE__*/React__default.createElement("p", {
     id: chartLabelId,
     className: "".concat(blockClass, "__chart-label")
   }, chartLabel)), enableToggle && /*#__PURE__*/React__default.createElement(IconButton, {
@@ -151,13 +152,13 @@ var Checklist = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     className: "".concat(blockClass, "__content-outer")
   }, /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content-inner")
-  }, /*#__PURE__*/React__default.createElement("section", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: cx("".concat(blockClass, "__body"))
   }, taskLists.map(function (list, index) {
-    return /*#__PURE__*/React__default.createElement("div", {
+    return /*#__PURE__*/React__default.createElement(Section, {
       className: "".concat(blockClass, "__list-group"),
       key: "".concat(list.title, "-").concat(index)
-    }, list.title && /*#__PURE__*/React__default.createElement("h3", {
+    }, list.title && /*#__PURE__*/React__default.createElement(Heading, {
       title: list.title,
       className: "".concat(blockClass, "__list-title")
     }, list.title), /*#__PURE__*/React__default.createElement("ol", {

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
+type TooltipAlignment = 'top' | 'bottom';
 interface CoachmarkStackProps {
     /**
      * CoachmarkStack should use a single CoachmarkOverlayElements component as a child.
@@ -51,6 +52,10 @@ interface CoachmarkStackProps {
      * The title of the Coachmark.
      */
     title: string;
+    /**
+     * Label's tooltip position
+     */
+    tooltipAlign?: TooltipAlignment;
 }
 /**
  * Stacked coachmarks are used to call out specific functionality or concepts

package/es/components/CoachmarkStack/CoachmarkStack.js

@@ -19,7 +19,7 @@ import { CoachmarkContext } from '../Coachmark/utils/context.js';
 import { COACHMARK_OVERLAY_KIND } from '../Coachmark/utils/enums.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
-var _excluded = ["children", "className", "onClose", "description", "renderMedia", "navLinkLabels", "portalTarget", "closeButtonLabel", "tagline", "theme", "title"];
+var _excluded = ["children", "className", "onClose", "description", "renderMedia", "navLinkLabels", "portalTarget", "closeButtonLabel", "tagline", "theme", "title", "tooltipAlign"];
 
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
@@ -63,6 +63,7 @@ var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     title = _ref.title,
+    tooltipAlign = _ref.tooltipAlign,
     rest = _objectWithoutProperties(_ref, _excluded);
   var portalNode = useRef(null);
   useIsomorphicEffect(function () {
@@ -220,7 +221,8 @@ var CoachmarkStack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     },
     portalTarget: portalTarget,
     closeButtonLabel: closeButtonLabel,
-    title: title
+    title: title,
+    tooltipAlign: tooltipAlign
   }), portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/createPortal(wrappedChildren, portalNode === null || portalNode === void 0 ? void 0 : portalNode.current) : null));
 });
 
@@ -280,7 +282,11 @@ CoachmarkStack.propTypes = {
   /**
    * The title of the Coachmark.
    */
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  /**
+   * Label's tooltip position
+   */
+  tooltipAlign: PropTypes.oneOf(['top', 'bottom'])
 };
 
 export { CoachmarkStack };

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

@@ -5,6 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
+type TooltipAlignment = 'top' | 'bottom';
 interface CoachmarkStackHomeProps {
     /**
      * Optional class name for this component.
@@ -53,6 +54,10 @@ interface CoachmarkStackHomeProps {
      * The title of the Coachmark.
      */
     title: string;
+    /**
+     * Label's tooltip position
+     */
+    tooltipAlign?: TooltipAlignment;
 }
 /**
  * DO NOT USE. This component is for the exclusive use

package/es/components/CoachmarkStack/CoachmarkStackHome.js

@@ -5,20 +5,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends, toConsumableArray as _toConsumableArray } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
 import pconsole from '../../global/js/utils/pconsole.js';
 import PropTypes from '../../_virtual/index.js';
 import cx from 'classnames';
 import { Idea } from '@carbon/react/icons';
-import { Button } from '@carbon/react';
+import { Button, Tooltip } from '@carbon/react';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
 import { createPortal } from 'react-dom';
 import { CoachmarkHeader } from '../Coachmark/CoachmarkHeader.js';
 import { useIsomorphicEffect } from '../../global/js/hooks/useIsomorphicEffect.js';
 
-var _excluded = ["className", "description", "isOpen", "renderMedia", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title"];
+var _excluded = ["className", "description", "isOpen", "renderMedia", "navLinkLabels", "onClickNavItem", "onClose", "portalTarget", "closeButtonLabel", "title", "tooltipAlign"];
 // Carbon and package components we use.
 /* TODO: @import(s) of carbon components and other package components. */
 
@@ -42,12 +42,18 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
     portalTarget = _ref.portalTarget,
     closeButtonLabel = _ref.closeButtonLabel,
     title = _ref.title,
+    tooltipAlign = _ref.tooltipAlign,
     rest = _objectWithoutProperties(_ref, _excluded);
   var buttonFocusRef = useRef(null);
   var _useState = useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     linkFocusIndex = _useState2[0],
     setLinkFocusIndex = _useState2[1];
+  var navItemRefs = useRef([]);
+  var _useState3 = useState([]),
+    _useState4 = _slicedToArray(_useState3, 2),
+    overflowStates = _useState4[0],
+    setOverflowStates = _useState4[1];
   useEffect(function () {
     setTimeout(function () {
       if (isOpen && buttonFocusRef.current) {
@@ -63,10 +69,26 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
   if (!navLinkLabels) {
     return pconsole.warn("".concat(componentName, " is an Onboarding internal component and is not intended for general use."));
   }
+  var itemRefHandler = function itemRefHandler(index, node) {
+    if (node && navItemRefs.current[index] !== node) {
+      var isOverflowing = node.scrollWidth > node.clientWidth;
+      navItemRefs.current[index] = node;
+      setOverflowStates(function (prev) {
+        var newState = _toConsumableArray(prev);
+        newState[index] = isOverflowing;
+        return newState;
+      });
+    }
+  };
   function renderNavLink(index, label) {
+    var _overflowStates$index;
     var ref = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : null;
+    var isOverflowing = (_overflowStates$index = overflowStates[index]) !== null && _overflowStates$index !== void 0 ? _overflowStates$index : false;
     return /*#__PURE__*/React__default.createElement("li", {
-      key: index
+      key: index,
+      ref: function ref(node) {
+        itemRefHandler(index, node);
+      }
     }, /*#__PURE__*/React__default.createElement(Button, {
       kind: "ghost",
       size: "sm",
@@ -75,7 +97,14 @@ var CoachmarkStackHome = /*#__PURE__*/forwardRef(function (_ref, ref) {
         onClickNavItem(index + 1);
       },
       ref: ref
-    }, label));
+    }, isOverflowing ? /*#__PURE__*/React__default.createElement(Tooltip, {
+      highContrast: false,
+      label: label,
+      align: tooltipAlign,
+      className: "".concat(blockClass, "__navLinkLabels-tooltip")
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "".concat(blockClass, "__navLinkLabels-text")
+    }, label)) : label));
   }
   return portalNode !== null && portalNode !== void 0 && portalNode.current ? /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className),
@@ -177,7 +206,11 @@ CoachmarkStackHome.propTypes = {
   /**
    * The title of the Coachmark.
    */
-  title: PropTypes.string.isRequired
+  title: PropTypes.string.isRequired,
+  /**
+   * Label's tooltip position
+   */
+  tooltipAlign: PropTypes.oneOf(['top', 'bottom'])
 };
 
 export { CoachmarkStackHome };

package/es/components/CreateFullPage/CreateFullPage.d.ts

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2023
+ * Copyright IBM Corp. 2021, 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.

package/es/components/CreateFullPage/CreateFullPage.js

@@ -7,7 +7,7 @@
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { Tooltip, Form, ComposedModal, ModalHeader, ModalBody, ModalFooter, Button } from '@carbon/react';
-import React__default, { useState, useEffect, createContext } from 'react';
+import React__default, { useState, useRef, useEffect, createContext } from 'react';
 import { overflowAriaLabel_required_if_breadcrumbs_exist, SimpleHeader } from '../SimpleHeader/SimpleHeader.js';
 import { ActionSet } from '../ActionSet/ActionSet.js';
 import PropTypes from '../../_virtual/index.js';
@@ -19,7 +19,6 @@ import { pkg } from '../../settings.js';
 import { usePreviousValue } from '../../global/js/hooks/usePreviousValue.js';
 import { useCreateComponentFocus } from '../../global/js/hooks/useCreateComponentFocus.js';
 import { useValidCreateStepCount } from '../../global/js/hooks/useValidCreateStepCount.js';
-import { useResetCreateComponent } from '../../global/js/hooks/useResetCreateComponent.js';
 import { useCreateComponentStepChange } from '../../global/js/hooks/useCreateComponentStepChange.js';
 import { CreateInfluencer } from '../CreateInfluencer/CreateInfluencer.js';
 
@@ -93,8 +92,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     modalIsOpen = _useState10[0],
     setModalIsOpen = _useState10[1];
   var previousState = usePreviousValue({
-    currentStep: currentStep,
-    open: open
+    currentStep: currentStep
   });
   var _useState11 = useState(false),
     _useState12 = _slicedToArray(_useState11, 2),
@@ -124,6 +122,7 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     _useState24 = _slicedToArray(_useState23, 2),
     lastIncludedStep = _useState24[0],
     setLastIncludedStep = _useState24[1];
+  var invalidInitialStepWarned = useRef(false);
   useEffect(function () {
     var firstItem = stepData.findIndex(function (item) {
       return item === null || item === void 0 ? void 0 : item.shouldIncludeStep;
@@ -137,11 +136,18 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     }
 
     /**@ts-ignore */
-    if (open && initialStep) {
+    if (initialStep) {
       var numberOfHiddenSteps = getNumberOfHiddenSteps(stepData, initialStep);
       setCurrentStep(Number(initialStep + numberOfHiddenSteps));
     }
   }, [stepData, firstIncludedStep, lastIncludedStep, initialStep, modalIsOpen]);
+  useEffect(function () {
+    if (!(invalidInitialStepWarned !== null && invalidInitialStepWarned !== void 0 && invalidInitialStepWarned.current)) {
+      checkForValidInitialStep();
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialStep, stepData]);
   useCreateComponentFocus({
     previousState: previousState,
     currentStep: currentStep,
@@ -150,17 +156,6 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     firstFocusElement: firstFocusElement
   });
   useValidCreateStepCount(stepData.length, componentName);
-  useResetCreateComponent({
-    firstIncludedStep: firstIncludedStep,
-    previousState: previousState,
-    open: true,
-    setCurrentStep: setCurrentStep,
-    stepData: stepData,
-    /**@ts-ignore */
-    initialStep: initialStep,
-    totalSteps: stepData === null || stepData === void 0 ? void 0 : stepData.length,
-    componentName: componentName
-  });
   useCreateComponentStepChange({
     firstIncludedStep: firstIncludedStep,
     lastIncludedStep: lastIncludedStep,
@@ -183,6 +178,15 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     setCreateComponentActions: setCreateFullPageActions,
     setModalIsOpen: setModalIsOpen
   });
+  var checkForValidInitialStep = function checkForValidInitialStep() {
+    // An invalid initialStep value was provided, we'll default to rendering the first step or last step
+
+    if (initialStep && stepData !== null && stepData !== void 0 && stepData.length && Number(initialStep) > Number(stepData === null || stepData === void 0 ? void 0 : stepData.length) || Number(initialStep) <= 0) {
+      invalidInitialStepWarned.current = true;
+      setCurrentStep(1);
+      console.warn("".concat(componentName, ": An invalid `initialStep` prop was supplied. The `initialStep` prop should be a number that is greater than 0 or less than or equal to the number of steps your ").concat(componentName, " has."));
+    }
+  };
   // currently, we are not supporting the use of 'view all' toggle state
   /* istanbul ignore next */
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
@@ -236,9 +240,10 @@ var CreateFullPage = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
       setStepData: setStepData,
       stepData: stepData
     }
-  }, React__default.Children.map(children, function (child, index) {
+  }, React__default.Children.toArray(children).filter(Boolean).map(function (child, index) {
     return /*#__PURE__*/React__default.createElement(StepNumberContext.Provider, {
-      value: index + 1
+      value: index + 1,
+      key: index
     }, child);
   })))), /*#__PURE__*/React__default.createElement(ActionSet, {
     className: "".concat(blockClass, "__buttons"),

package/es/components/Datagrid/Datagrid/DraggableElement.d.ts

@@ -11,16 +11,18 @@ interface DraggableElementProps extends PropsWithChildren {
     classList?: string;
     disabled?: boolean;
     id: string;
+    elementId?: string;
     isSticky?: boolean;
     selected?: boolean;
 }
 declare const DraggableElement: {
-    ({ id, children, classList, disabled, ariaLabel, isSticky, selected, }: DraggableElementProps): React.JSX.Element;
+    ({ id, elementId, children, classList, disabled, ariaLabel, isSticky, selected, }: DraggableElementProps): React.JSX.Element;
     propTypes: {
         ariaLabel: any;
         children: any;
         classList: any;
         disabled: any;
+        elementId: any;
         id: any;
         isSticky: any;
         selected: any;

package/es/components/Datagrid/Datagrid/DraggableElement.js

@@ -18,6 +18,7 @@ var _Locked, _DraggableIcon;
 var blockClass = "".concat(pkg.prefix, "--datagrid");
 var DraggableElement = function DraggableElement(_ref) {
   var id = _ref.id,
+    elementId = _ref.elementId,
     children = _ref.children,
     classList = _ref.classList,
     disabled = _ref.disabled,
@@ -49,7 +50,7 @@ var DraggableElement = function DraggableElement(_ref) {
   };
   return /*#__PURE__*/React__default.createElement("li", _extends({
     className: cx(classList, "".concat(blockClass, "__draggable-handleHolder"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__draggable-handleHolder--selected"), selected), "".concat(blockClass, "__draggable-handleHolder--sticky"), isSticky), "".concat(blockClass, "__draggable-handleHolder--dragging"), isDragging)),
-    id: id,
+    id: elementId ? elementId : id,
     ref: setNodeRef,
     style: style
   }, attributes, listeners, {
@@ -67,6 +68,7 @@ DraggableElement.propTypes = {
   children: PropTypes.element.isRequired,
   classList: PropTypes.string,
   disabled: PropTypes.bool,
+  elementId: PropTypes.string,
   id: PropTypes.string.isRequired,
   isSticky: PropTypes.bool,
   selected: PropTypes.bool

package/es/components/Datagrid/Datagrid/addons/CustomizeColumns/DraggableItemsList.js

@@ -10,6 +10,7 @@ import React__default from 'react';
 import { p as propTypesExports } from '../../../../../_virtual/index.js';
 import { Checkbox } from '@carbon/react';
 import { isColumnVisible } from './common.js';
+import { useId } from '../../../../../global/js/utils/useId.js';
 import DraggableElement from '../../DraggableElement.js';
 import { pkg } from '../../../../../settings.js';
 import { getNodeTextContent as _getNodeTextContent } from '../../../../../global/js/utils/getNodeTextContent.js';
@@ -29,6 +30,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
     onSelectColumn = _ref.onSelectColumn,
     setAriaRegionText = _ref.setAriaRegionText;
   var draggableClass = "".concat(blockClass, "__draggable-item");
+  var generatedId = useId();
   var visibleCols = columns
   // hide the columns without Header, e.g the sticky actions, spacer
   .filter(function (colDef) {
@@ -192,6 +194,7 @@ var DraggableItemsList = function DraggableItemsList(_ref) {
       classList: draggableClass,
       key: colDef.id,
       id: colDef.id,
+      elementId: "".concat(colDef.id, "-").concat(generatedId),
       disabled: filterString.length > 0 || isFrozenColumn,
       ariaLabel: colHeaderTitle,
       isSticky: isFrozenColumn,

package/es/components/InlineTip/InlineTip.js

@@ -6,7 +6,7 @@
  */
 
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { IconButton, Button } from '@carbon/react';
+import { Section, IconButton, Heading, Button } from '@carbon/react';
 import { Close, Idea, Crossroads } from '@carbon/react/icons';
 import React__default, { useState, useRef, useMemo, useEffect } from 'react';
 import PropTypes from '../../_virtual/index.js';
@@ -82,7 +82,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   useEffect(function () {
     setIsCollapsed(collapsible);
   }, [collapsible]);
-  return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
+  return /*#__PURE__*/React__default.createElement(Section, _extends({}, rest, {
     "aria-labelledby": labelId,
     className: cx(blockClass, className, collapsible && "".concat(blockClass, "__collapsible"), isCollapsed && "".concat(blockClass, "__collapsible-collapsed"), renderMedia && "".concat(blockClass, "__has-media"), [narrow ? "".concat(blockClass, "__narrow") : "".concat(blockClass, "__wide")], withLeftGutter && !narrow && "".concat(blockClass, "__with-left-gutter")),
     ref: ref,
@@ -104,7 +104,7 @@ var InlineTip = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     size: 16
   }))), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content")
-  }, /*#__PURE__*/React__default.createElement("h6", {
+  }, /*#__PURE__*/React__default.createElement(Heading, {
     id: labelId,
     className: "".concat(blockClass, "__title")
   }, title), /*#__PURE__*/React__default.createElement("section", {

package/es/components/InterstitialScreen/InterstitialScreen.d.ts

@@ -1,15 +1,15 @@
 /**
- * Copyright IBM Corp. 2024, 2024
+ * 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, { PropsWithChildren, ReactNode } from 'react';
-type BreakpointsWithMedia = {
-    xlg?: number;
-    lg?: number;
-};
-export interface InterstitialScreenProps extends PropsWithChildren {
+import React, { ReactNode, RefObject } from 'react';
+import { InterstitialScreenHeaderProps } from './InterstitialScreenHeader';
+import { InterstitialScreenBodyProps } from './InterstitialScreenBody';
+import { InterstitialScreenFooterProps } from './InterstitialScreenFooter';
+export type ActionType = 'close' | 'start' | 'skip' | 'back' | 'next';
+export interface InterstitialScreenProps {
     /**
      * Provide the contents of the InterstitialScreen.
      */
@@ -18,26 +18,6 @@ export interface InterstitialScreenProps extends PropsWithChildren {
      * 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 domain this app belongs to, e.g. "IBM Cloud Pak".
-     */
-    domainName?: string;
-    /**
-     * Provide an optional class to be applied to the <header> element >.
-     */
-    headerClassName?: string;
-    /**
-     * Provide an optional class to be applied to the <header> element >.
-     */
-    headerTitle?: string;
-    /**
-     * Optional parameter to hide the progress indicator when multiple steps are used.
-     */
-    hideProgressIndicator?: boolean;
     /**
      * The aria label applied to the Interstitial Screen component
      */
@@ -51,46 +31,43 @@ export interface InterstitialScreenProps extends PropsWithChildren {
      * Specifies whether the component is currently open.
      */
     isOpen?: boolean;
-    /**
-     * Optional prop to render any media like images or any animated media.
-     */
-    renderMedia?: (params: any) => ReactNode;
-    /**
-     * optional prop to specify breakpoints when media is rendered through renderMedia
-     * 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?: BreakpointsWithMedia;
-    /**
-     * The label for the Next button.
-     */
-    nextButtonLabel?: string;
     /**
      * Function to call when the close button is clicked.
      */
-    onClose?: () => void;
-    /**
-     * The label for the Previous button.
-     */
-    previousButtonLabel?: string;
-    /**
-     * The name of this app, e.g. "QRadar".
-     */
-    productName?: string;
-    /**
-     * The label for the skip button.
-     */
-    skipButtonLabel?: string;
-    /**
-     * The label for the start button.
-     */
-    startButtonLabel?: string;
+    onClose?: (value: ActionType) => void;
+}
+type InterstitialScreenComponent = React.ForwardRefExoticComponent<InterstitialScreenProps & React.RefAttributes<HTMLDivElement>> & {
+    Header: React.FC<InterstitialScreenHeaderProps>;
+    Body: React.FC<InterstitialScreenBodyProps>;
+    Footer: React.FC<InterstitialScreenFooterProps>;
+};
+export type disableButtonConfigType = {
+    skip?: boolean;
+    back?: boolean;
+    next?: boolean;
+    start?: boolean;
+};
+interface InterstitialScreenContextType {
+    bodyChildrenData?: ReactNode;
+    setBodyChildrenData?: (value: ReactNode) => void;
+    isFullScreen?: boolean;
+    handleClose?: (value: ActionType) => void;
+    progStep: number;
+    setProgStep?: (value: number) => void;
+    bodyScrollRef?: RefObject<HTMLDivElement | null>;
+    scrollRef?: RefObject<HTMLDivElement>;
+    handleGotoStep?: (value: number) => void;
+    stepCount: number;
+    setStepCount?: (value: number) => void;
+    disableButtonConfig?: disableButtonConfigType;
+    setDisableButtonConfig?: (value: disableButtonConfigType) => void;
 }
+export declare const InterstitialScreenContext: React.Context<InterstitialScreenContextType>;
 /**
  * InterstitialScreen can be a full page or an overlay, and are
  * shown on the first time a user accesses a new experience
  * (e.g. upon first login or first time opening a page where a
  * newly purchased capability is presented).
  */
-export declare let InterstitialScreen: React.ForwardRefExoticComponent<InterstitialScreenProps & React.RefAttributes<HTMLDivElement>>;
+export declare let InterstitialScreen: InterstitialScreenComponent;
 export {};