@carbon/ibm-products
Version:
Carbon for IBM Products
94 lines (92 loc) • 4.22 kB
JavaScript
/**
* Copyright IBM Corp. 2020, 2026
*
* 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 { __toESM } from "../../_virtual/_rolldown/runtime.js";
import { require_classnames } from "../../node_modules/classnames/index.js";
import { getDevtoolsProps } from "../../global/js/utils/devtools.js";
import { InterstitialScreenContext, blockClass } from "./context.js";
import React from "react";
import PropTypes from "prop-types";
import { ModalHeader, ProgressIndicator, ProgressStep, usePrefix } from "@carbon/react";
//#region src/components/InterstitialScreen/InterstitialScreenHeader.tsx
/**
* 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.
*/
var import_classnames = /* @__PURE__ */ __toESM(require_classnames());
const InterstitialScreenHeader = React.forwardRef((props, ref) => {
const { className = "", headerTitle, headerSubTitle, closeIconDescription, hideProgressIndicator, children, ...rest } = props;
const { bodyChildrenData, isFullScreen, progStep, handleClose, stepCount } = React.useContext(InterstitialScreenContext);
const headerBlockClass = `${blockClass}--internal-header`;
const carbonPrefix = usePrefix();
const headerContent = () => {
return /* @__PURE__ */ React.createElement(React.Fragment, null, (headerTitle || headerSubTitle) && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}--titleContainer` }, headerTitle && /* @__PURE__ */ React.createElement("h1", null, headerTitle), headerSubTitle && /* @__PURE__ */ React.createElement("h2", null, headerSubTitle)), children, !hideProgressIndicator && bodyChildrenData && Array.isArray(bodyChildrenData) && /* @__PURE__ */ React.createElement("div", { className: `${blockClass}--progress` }, /* @__PURE__ */ React.createElement(ProgressIndicator, {
vertical: false,
currentIndex: progStep
}, bodyChildrenData?.map((child, idx) => {
if (React.isValidElement(child)) {
const stepKey = `${child.props?.stepTitle?.replace(/\s+/g, "") || "step"}-${idx}`;
return /* @__PURE__ */ React.createElement(ProgressStep, {
key: stepKey,
label: child.props.stepTitle ?? `Step ${idx + 1}`,
translateWithId: child.props.translateWithId
});
}
})), /* @__PURE__ */ React.createElement("div", {
"aria-live": "polite",
"aria-atomic": "true",
className: `${carbonPrefix}--visually-hidden`
}, "Step ", progStep + 1, " of ", stepCount)));
};
const closeModal = () => {
handleClose?.("close");
};
return isFullScreen ? /* @__PURE__ */ React.createElement("header", {
ref,
role: "presentation",
className: (0, import_classnames.default)(headerBlockClass, className, { [`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children }),
...getDevtoolsProps("InterstitialScreenHeader"),
...rest
}, headerContent()) : /* @__PURE__ */ React.createElement(ModalHeader, {
ref,
className: (0, import_classnames.default)(headerBlockClass, className, { [`${headerBlockClass}--has-title`]: headerTitle || headerSubTitle || children }),
closeModal,
iconDescription: closeIconDescription,
...getDevtoolsProps("InterstitialScreenHeader"),
...rest
}, 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: PropTypes.node,
/**
* Provide an optional class to be applied to the containing node.
*/
className: PropTypes.string,
/**
* Tooltip text and aria label for the Close button icon.
*/
closeIconDescription: PropTypes.string,
/**
* Provide an optional sub title to be applied to the header >.
*/
headerSubTitle: PropTypes.string,
/**
* Provide an optional title to be applied to the header >.
*/
headerTitle: PropTypes.string,
/**
* Optional parameter to hide the progress indicator when multiple steps are used.
*/
hideProgressIndicator: PropTypes.bool
};
//#endregion
export { InterstitialScreenHeader as default };