@carbon/ibm-products
Version:
Carbon for IBM Products
106 lines (104 loc) • 4.53 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 { SidePanel } from "../../SidePanel/SidePanel.js";
import { TearsheetContext, blockClass } from "./context.js";
import { useCollapsible } from "../../../global/js/hooks/useCollapsible.js";
import React, { forwardRef, useContext, useEffect, useRef, useState } from "react";
import { Layer } from "@carbon/react";
//#region src/components/Tearsheet/next/TearsheetBody.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 TearsheetBody = forwardRef(({ children, className }, ref) => {
return /* @__PURE__ */ React.createElement("div", {
className: `${blockClass}__body ${className}`,
ref
}, children);
});
/**
* ----------------
* MainContent
* ----------------
*/
const MainContent = forwardRef(({ children, className, isFlush, ...rest }, ref) => {
const localRef = useRef(null);
const mainContentRef = ref || localRef;
const [container, setContainer] = useState(null);
const { setFullyCollapsed, disableHeaderCollapse } = useContext(TearsheetContext);
useEffect(() => {
setContainer(typeof mainContentRef === "function" ? null : mainContentRef?.current ?? null);
}, [mainContentRef]);
const collapseHeader = (collapse) => {
if (container) {
if (collapse) {
if (container.scrollHeight > container.clientHeight) setFullyCollapsed?.(true);
} else if (container.scrollTop === 0) setFullyCollapsed?.(false);
}
};
useCollapsible({
container,
triggerCollapse: collapseHeader,
disableHeaderCollapse
});
return /* @__PURE__ */ React.createElement(Layer, {
withBackground: true,
className: (0, import_classnames.default)(`${blockClass}__main-content`, className, { [`${blockClass}__flush`]: isFlush }),
ref: mainContentRef,
...rest
}, children);
});
const SummaryContent = forwardRef(({ children, className, summaryPanelOpen = false, onSummaryPanelClose, isFlush, summaryPanelTriggerRef, summaryPanelAriaLabel = "Summary panel" }, ref) => {
const { isSm } = useContext(TearsheetContext);
const prevOpenRef = useRef(summaryPanelOpen);
useEffect(() => {
if (prevOpenRef.current && !summaryPanelOpen && summaryPanelTriggerRef?.current) setTimeout(() => {
summaryPanelTriggerRef.current?.focus();
}, 100);
prevOpenRef.current = summaryPanelOpen;
}, [summaryPanelOpen, summaryPanelTriggerRef]);
return !isSm ? /* @__PURE__ */ React.createElement("div", {
className: (0, import_classnames.default)(`${blockClass}__summary-content`, className, { [`${blockClass}__flush`]: isFlush }),
ref
}, /* @__PURE__ */ React.createElement("aside", null, children)) : /* @__PURE__ */ React.createElement(SidePanel, {
size: "sm",
open: summaryPanelOpen,
onRequestClose: onSummaryPanelClose,
className: (0, import_classnames.default)(`${blockClass}__side-panel`, className),
"aria-label": summaryPanelAriaLabel,
"aria-modal": "true"
}, children);
});
const Influencer = forwardRef(({ children, className, influencerPanelOpen = false, onInfluencerPanelClose, isFlush, influencerPanelTriggerRef, influencerPanelAriaLabel = "Influencer panel" }, ref) => {
const { isSm } = useContext(TearsheetContext);
const prevOpenRef = useRef(influencerPanelOpen);
useEffect(() => {
if (prevOpenRef.current && !influencerPanelOpen && influencerPanelTriggerRef?.current) setTimeout(() => {
influencerPanelTriggerRef.current?.focus();
}, 100);
prevOpenRef.current = influencerPanelOpen;
}, [influencerPanelOpen, influencerPanelTriggerRef]);
return !isSm ? /* @__PURE__ */ React.createElement("aside", {
className: (0, import_classnames.default)(`${blockClass}__influencer`, className, { [`${blockClass}__flush`]: isFlush }),
ref
}, children) : /* @__PURE__ */ React.createElement(SidePanel, {
size: "sm",
open: influencerPanelOpen,
onRequestClose: onInfluencerPanelClose,
placement: "left",
className: (0, import_classnames.default)(`${blockClass}__side-panel`, className),
"aria-label": influencerPanelAriaLabel,
"aria-modal": "true"
}, children);
});
//#endregion
export { Influencer, MainContent, SummaryContent, TearsheetBody as default };