@carbon/ibm-products
Version:
Carbon for IBM Products
110 lines (108 loc) • 5.09 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_SidePanel = require("../../SidePanel/SidePanel.js");
const require_context = require("./context.js");
const require_useCollapsible = require("../../../global/js/hooks/useCollapsible.js");
let react = require("react");
react = require_runtime.__toESM(react);
let _carbon_react = require("@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__ */ require_runtime.__toESM(require_index.default);
const TearsheetBody = (0, react.forwardRef)(({ children, className }, ref) => {
return /* @__PURE__ */ react.default.createElement("div", {
className: `${require_context.blockClass}__body ${className}`,
ref
}, children);
});
/**
* ----------------
* MainContent
* ----------------
*/
const MainContent = (0, react.forwardRef)(({ children, className, isFlush, ...rest }, ref) => {
const localRef = (0, react.useRef)(null);
const mainContentRef = ref || localRef;
const [container, setContainer] = (0, react.useState)(null);
const { setFullyCollapsed, disableHeaderCollapse } = (0, react.useContext)(require_context.TearsheetContext);
(0, react.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);
}
};
require_useCollapsible.useCollapsible({
container,
triggerCollapse: collapseHeader,
disableHeaderCollapse
});
return /* @__PURE__ */ react.default.createElement(_carbon_react.Layer, {
withBackground: true,
className: (0, import_classnames.default)(`${require_context.blockClass}__main-content`, className, { [`${require_context.blockClass}__flush`]: isFlush }),
ref: mainContentRef,
...rest
}, children);
});
const SummaryContent = (0, react.forwardRef)(({ children, className, summaryPanelOpen = false, onSummaryPanelClose, isFlush, summaryPanelTriggerRef, summaryPanelAriaLabel = "Summary panel" }, ref) => {
const { isSm } = (0, react.useContext)(require_context.TearsheetContext);
const prevOpenRef = (0, react.useRef)(summaryPanelOpen);
(0, react.useEffect)(() => {
if (prevOpenRef.current && !summaryPanelOpen && summaryPanelTriggerRef?.current) setTimeout(() => {
summaryPanelTriggerRef.current?.focus();
}, 100);
prevOpenRef.current = summaryPanelOpen;
}, [summaryPanelOpen, summaryPanelTriggerRef]);
return !isSm ? /* @__PURE__ */ react.default.createElement("div", {
className: (0, import_classnames.default)(`${require_context.blockClass}__summary-content`, className, { [`${require_context.blockClass}__flush`]: isFlush }),
ref
}, /* @__PURE__ */ react.default.createElement("aside", null, children)) : /* @__PURE__ */ react.default.createElement(require_SidePanel.SidePanel, {
size: "sm",
open: summaryPanelOpen,
onRequestClose: onSummaryPanelClose,
className: (0, import_classnames.default)(`${require_context.blockClass}__side-panel`, className),
"aria-label": summaryPanelAriaLabel,
"aria-modal": "true"
}, children);
});
const Influencer = (0, react.forwardRef)(({ children, className, influencerPanelOpen = false, onInfluencerPanelClose, isFlush, influencerPanelTriggerRef, influencerPanelAriaLabel = "Influencer panel" }, ref) => {
const { isSm } = (0, react.useContext)(require_context.TearsheetContext);
const prevOpenRef = (0, react.useRef)(influencerPanelOpen);
(0, react.useEffect)(() => {
if (prevOpenRef.current && !influencerPanelOpen && influencerPanelTriggerRef?.current) setTimeout(() => {
influencerPanelTriggerRef.current?.focus();
}, 100);
prevOpenRef.current = influencerPanelOpen;
}, [influencerPanelOpen, influencerPanelTriggerRef]);
return !isSm ? /* @__PURE__ */ react.default.createElement("aside", {
className: (0, import_classnames.default)(`${require_context.blockClass}__influencer`, className, { [`${require_context.blockClass}__flush`]: isFlush }),
ref
}, children) : /* @__PURE__ */ react.default.createElement(require_SidePanel.SidePanel, {
size: "sm",
open: influencerPanelOpen,
onRequestClose: onInfluencerPanelClose,
placement: "left",
className: (0, import_classnames.default)(`${require_context.blockClass}__side-panel`, className),
"aria-label": influencerPanelAriaLabel,
"aria-modal": "true"
}, children);
});
//#endregion
exports.Influencer = Influencer;
exports.MainContent = MainContent;
exports.SummaryContent = SummaryContent;
exports.default = TearsheetBody;