@carbon/ibm-products
Version:
Carbon for IBM Products
80 lines (78 loc) • 3.89 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.
*/
const require_runtime = require("../../../_virtual/_rolldown/runtime.js");
const require_index = require("../../../node_modules/classnames/index.js");
const require_context = require("./context.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _carbon_react = require("@carbon/react");
let _carbon_react_icons = require("@carbon/react/icons");
//#region src/components/Tearsheet/next/TearsheetHeader.tsx
/**
* Copyright IBM Corp. 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__ */ require_runtime.__toESM(require_index.default);
const TearsheetHeader = react.default.forwardRef((props, ref) => {
const { children, closeIconDescription, hideCloseButton = false, className, disableHeaderCollapse, ...rest } = props;
const parentContext = (0, react.useContext)(require_context.TearsheetContext);
const { fullyCollapsed, setDisableHeaderCollapse } = parentContext;
const localRef = (0, react.useRef)(void 0);
const headerRef = ref || localRef;
(0, react.useEffect)(() => {
setDisableHeaderCollapse?.(!!disableHeaderCollapse);
}, [disableHeaderCollapse, setDisableHeaderCollapse]);
const enhancedContext = {
...parentContext,
closeIconDescription,
hideCloseButton
};
return /* @__PURE__ */ react.default.createElement(require_context.TearsheetContext.Provider, { value: enhancedContext }, /* @__PURE__ */ react.default.createElement(_carbon_react.ModalHeader, {
ref: headerRef,
className: (0, import_classnames.default)(`${require_context.blockClass}__header`, {
[`${className}`]: true,
[`${require_context.blockClass}__header--with-close-icon`]: !hideCloseButton,
[`${require_context.blockClass}__header-collapsed`]: fullyCollapsed
}),
closeClassName: `${require_context.blockClass}__header--no-close-icon`,
...rest
}, children));
});
const TearsheetNavigationBar = react.default.forwardRef((props, ref) => {
const { children, scroller, className, ...rest } = props;
return /* @__PURE__ */ react.default.createElement("div", {
className: `${require_context.blockClass}__navigation-bar ${className}`,
...rest
}, children, scroller);
});
const TearsheetScrollButton = react.default.forwardRef(function PageHeaderExpander({ className, children, label, onClick, collapseText = "Collapse", expandText = "Expand", ...other }, ref) {
const { fullyCollapsed, setFullyCollapsed } = react.default.useContext(require_context.TearsheetContext);
const handleScroller = (isFullyCollapsed) => {
setFullyCollapsed?.(!isFullyCollapsed);
};
return /* @__PURE__ */ react.default.createElement("span", { className: `${require_context.blockClass}__scroller-container ${className}` }, /* @__PURE__ */ react.default.createElement(_carbon_react.IconButton, {
ref,
label: fullyCollapsed ? expandText : collapseText,
size: "md",
kind: "ghost",
autoAlign: true,
...other,
onClick: (event) => {
onClick?.(event);
handleScroller(!!fullyCollapsed);
},
className: (0, import_classnames.default)(className, `${require_context.blockClass}__scroller-button`),
"aria-label": fullyCollapsed ? `${expandText} header` : `${collapseText} header`,
"aria-expanded": !fullyCollapsed
}, /* @__PURE__ */ react.default.createElement(_carbon_react_icons.ChevronUp, { className: (0, import_classnames.default)(`${require_context.blockClass}__scroller-button-icon`, { [`${require_context.blockClass}__scroller-button-icon-collapsed`]: fullyCollapsed }) })));
});
//#endregion
exports.TearsheetNavigationBar = TearsheetNavigationBar;
exports.TearsheetScrollButton = TearsheetScrollButton;
exports.default = TearsheetHeader;