@carbon/react
Version:
React components for the Carbon Design System
85 lines (83 loc) • 3.32 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_index = require("../IconButton/index.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
let _carbon_icons_react = require("@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.default.forwardRef(function ModalHeader({ buttonOnClick, children, className: customClassName, closeClassName, closeIconClassName, closeModal, iconDescription = "Close", label, labelClassName, title, titleClassName, ...rest }, ref) {
const prefix = require_usePrefix.usePrefix();
function handleCloseButtonClick(evt) {
closeModal?.(evt);
buttonOnClick?.(evt);
}
const headerClass = (0, classnames.default)(`${prefix}--modal-header`, customClassName);
const labelClass = (0, classnames.default)(`${prefix}--modal-header__label ${prefix}--type-delta`, labelClassName);
const titleClass = (0, classnames.default)(`${prefix}--modal-header__heading ${prefix}--type-beta`, titleClassName);
const closeClass = (0, classnames.default)(`${prefix}--modal-close`, closeClassName);
const closeIconClass = (0, classnames.default)(`${prefix}--modal-close__icon`, closeIconClassName);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: headerClass,
...rest,
ref,
children: [
label && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
className: labelClass,
children: label
}),
title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
className: titleClass,
children: title
}),
children,
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--modal-close-button`,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {
className: closeClass,
label: iconDescription,
onClick: handleCloseButtonClick,
"aria-label": iconDescription,
align: "left",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Close, {
size: 20,
"aria-hidden": "true",
tabIndex: "-1",
className: closeIconClass
})
})
})
]
});
});
ModalHeader.propTypes = {
buttonOnClick: prop_types.default.func,
children: prop_types.default.node,
className: prop_types.default.string,
closeClassName: prop_types.default.string,
closeIconClassName: prop_types.default.string,
closeModal: prop_types.default.func,
iconDescription: prop_types.default.string,
label: prop_types.default.string,
labelClassName: prop_types.default.string,
title: prop_types.default.node,
titleClassName: prop_types.default.string
};
//#endregion
exports.ModalHeader = ModalHeader;