@carbon/react
Version:
React components for the Carbon Design System
81 lines (79 loc) • 2.69 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 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 { usePrefix } from "../../internal/usePrefix.js";
import { IconButton } from "../IconButton/index.js";
import classNames from "classnames";
import React from "react";
import PropTypes from "prop-types";
import { jsx, jsxs } from "react/jsx-runtime";
import { Close } from "@carbon/icons-react";
//#region src/components/ComposedModal/ModalHeader.tsx
/**
* Copyright IBM Corp. 2016, 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.
*/
const ModalHeader = React.forwardRef(function ModalHeader({ buttonOnClick, children, className: customClassName, closeClassName, closeIconClassName, closeModal, iconDescription = "Close", label, labelClassName, title, titleClassName, ...rest }, ref) {
const prefix = usePrefix();
function handleCloseButtonClick(evt) {
closeModal?.(evt);
buttonOnClick?.(evt);
}
const headerClass = classNames(`${prefix}--modal-header`, customClassName);
const labelClass = classNames(`${prefix}--modal-header__label ${prefix}--type-delta`, labelClassName);
const titleClass = classNames(`${prefix}--modal-header__heading ${prefix}--type-beta`, titleClassName);
const closeClass = classNames(`${prefix}--modal-close`, closeClassName);
const closeIconClass = classNames(`${prefix}--modal-close__icon`, closeIconClassName);
return /* @__PURE__ */ jsxs("div", {
className: headerClass,
...rest,
ref,
children: [
label && /* @__PURE__ */ jsx("h2", {
className: labelClass,
children: label
}),
title && /* @__PURE__ */ jsx("h2", {
className: titleClass,
children: title
}),
children,
/* @__PURE__ */ jsx("div", {
className: `${prefix}--modal-close-button`,
children: /* @__PURE__ */ jsx(IconButton, {
className: closeClass,
label: iconDescription,
onClick: handleCloseButtonClick,
"aria-label": iconDescription,
align: "left",
children: /* @__PURE__ */ jsx(Close, {
size: 20,
"aria-hidden": "true",
tabIndex: "-1",
className: closeIconClass
})
})
})
]
});
});
ModalHeader.propTypes = {
buttonOnClick: PropTypes.func,
children: PropTypes.node,
className: PropTypes.string,
closeClassName: PropTypes.string,
closeIconClassName: PropTypes.string,
closeModal: PropTypes.func,
iconDescription: PropTypes.string,
label: PropTypes.string,
labelClassName: PropTypes.string,
title: PropTypes.node,
titleClassName: PropTypes.string
};
//#endregion
export { ModalHeader };