@carbon/ibm-products/lib/components/InterstitialScreen/InterstitialScreenHeader.js

Carbon for IBM Products

/**
 * 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 react = require('@carbon/react');
var React = require('react');
var index = require('../../_virtual/index.js');
var settings = require('../../settings.js');
var cx = require('classnames');
var InterstitialScreen = require('./InterstitialScreen.js');
var useId = require('../../global/js/utils/useId.js');

const InterstitialScreenHeader = /*#__PURE__*/React.forwardRef(props => {
  var _h, _h2;
  const {
    className = '',
    headerTitle,
    headerSubTitle,
    closeIconDescription,
    hideProgressIndicator,
    children
  } = props;
  const {
    bodyChildrenData,
    isFullScreen,
    progStep,
    handleClose,
    stepCount
  } = React.useContext(InterstitialScreen.InterstitialScreenContext);
  const blockClass = `${settings.pkg.prefix}--interstitial-screen`;
  const headerBlockClass = `${blockClass}--internal-header`;
  const _useId = useId.useId();
  const carbonPrefix = react.usePrefix();
  const headerContent = () => {
    return /*#__PURE__*/React.createElement(React.Fragment, null, (headerTitle || headerSubTitle) && /*#__PURE__*/React.createElement("div", {
      className: `${blockClass}--titleContainer`
    }, headerTitle && (_h || (_h = /*#__PURE__*/React.createElement("h1", null, headerTitle))), headerSubTitle && (_h2 || (_h2 = /*#__PURE__*/React.createElement("h2", null, headerSubTitle)))), children, !hideProgressIndicator && bodyChildrenData && Array.isArray(bodyChildrenData) && /*#__PURE__*/React.createElement("div", {
      className: `${blockClass}--progress`
    }, /*#__PURE__*/React.createElement(react.ProgressIndicator, {
      vertical: false,
      currentIndex: progStep
    }, bodyChildrenData?.map((child, idx) => {
      if (/*#__PURE__*/React.isValidElement(child)) {
        const stepKey = `${_useId}_${child.props?.stepTitle?.replace(/\s+/g, '') || idx}`;
        return /*#__PURE__*/React.createElement(react.ProgressStep, {
          key: stepKey,
          label: child.props.stepTitle || '',
          translateWithId: child.props.translateWithId
        });
      }
    })), /*#__PURE__*/React.createElement("div", {
      "aria-live": "polite",
      "aria-atomic": "true",
      className: `${carbonPrefix}--visually-hidden`
    }, "Step ", progStep + 1, " of ", stepCount)));
  };
  return isFullScreen ? /*#__PURE__*/React.createElement("header", {
    className: cx(headerBlockClass, className, {
      [`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children
    })
  }, headerContent()) : /*#__PURE__*/React.createElement(react.ModalHeader, {
    className: cx(headerBlockClass, className, {
      [`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children
    }),
    closeModal: handleClose,
    iconDescription: closeIconDescription
  }, headerContent());
});
InterstitialScreenHeader.propTypes = {
  /**
   * Provide the optional content for header section and will be render after header titles and before progress indicator.
   * People can make use of this if they want to have custom header.
   */
  children: index.default.node,
  /**
   * Provide an optional class to be applied to the containing node.
   */
  className: index.default.string,
  /**
   * Tooltip text and aria label for the Close button icon.
   */
  closeIconDescription: index.default.string,
  /**
   * Provide an optional sub title to be applied to the header >.
   */
  headerSubTitle: index.default.string,
  /**
   * Provide an optional title to be applied to the header >.
   */
  headerTitle: index.default.string,
  /**
   * Optional parameter to hide the progress indicator when multiple steps are used.
   */
  hideProgressIndicator: index.default.bool
};

exports.default = InterstitialScreenHeader;