@carbon/ibm-products
Version:
Carbon for IBM Products
84 lines (82 loc) • 3.72 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 { TearsheetContext, blockClass } from "./context.js";
import React, { useContext, useEffect, useRef } from "react";
import { IconButton, ModalHeader } from "@carbon/react";
import { ChevronUp } from "@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__ */ __toESM(require_classnames());
const TearsheetHeader = React.forwardRef((props, ref) => {
const { children, closeIconDescription, hideCloseButton = false, className, disableHeaderCollapse, onHeaderCollapse, ...rest } = props;
const parentContext = useContext(TearsheetContext);
const { fullyCollapsed, setDisableHeaderCollapse } = parentContext;
const localRef = useRef(void 0);
const headerRef = ref || localRef;
useEffect(() => {
setDisableHeaderCollapse?.(!!disableHeaderCollapse);
}, [disableHeaderCollapse, setDisableHeaderCollapse]);
useEffect(() => {
onHeaderCollapse?.(!!fullyCollapsed);
}, [fullyCollapsed, onHeaderCollapse]);
const enhancedContext = {
...parentContext,
closeIconDescription,
hideCloseButton,
onHeaderCollapse
};
return /* @__PURE__ */ React.createElement(TearsheetContext.Provider, { value: enhancedContext }, /* @__PURE__ */ React.createElement(ModalHeader, {
ref: headerRef,
className: (0, import_classnames.default)(`${blockClass}__header`, {
[`${className}`]: !!className,
[`${blockClass}__header--with-close-icon`]: !hideCloseButton,
[`${blockClass}__header-collapsed`]: fullyCollapsed
}),
closeClassName: `${blockClass}__header--no-close-icon`,
...rest
}, children));
});
TearsheetHeader.displayName = "TearsheetHeader";
const TearsheetNavigationBar = React.forwardRef((props, ref) => {
const { children, scroller, className = "", ...rest } = props;
return /* @__PURE__ */ React.createElement("div", {
className: `${blockClass}__navigation-bar ${className}`,
ref,
...rest
}, children, scroller);
});
TearsheetNavigationBar.displayName = "TearsheetNavigationBar";
const TearsheetScrollButton = React.forwardRef(function PageHeaderExpander({ className = "", onClick, collapseText = "Collapse", expandText = "Expand", ...other }, ref) {
const { fullyCollapsed, setFullyCollapsed } = React.useContext(TearsheetContext);
const handleScroller = (isFullyCollapsed) => {
setFullyCollapsed?.(!isFullyCollapsed);
};
return /* @__PURE__ */ React.createElement("span", { className: `${blockClass}__scroller-container ${className}` }, /* @__PURE__ */ React.createElement(IconButton, {
ref,
size: "md",
kind: "ghost",
autoAlign: true,
...other,
label: fullyCollapsed ? expandText : collapseText,
onClick: (event) => {
onClick?.(event);
handleScroller(!!fullyCollapsed);
},
className: (0, import_classnames.default)(className, `${blockClass}__scroller-button`),
"aria-label": fullyCollapsed ? `${expandText} header` : `${collapseText} header`,
"aria-expanded": !fullyCollapsed
}, /* @__PURE__ */ React.createElement(ChevronUp, { className: (0, import_classnames.default)(`${blockClass}__scroller-button-icon`, { [`${blockClass}__scroller-button-icon-collapsed`]: fullyCollapsed }) })));
});
//#endregion
export { TearsheetNavigationBar, TearsheetScrollButton, TearsheetHeader as default };