/** * Copyright IBM Corp. 2025, 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. */ import React, { ReactNode, FC } from 'react'; import { ComposedModalProps } from '@carbon/react'; import { TearsheetHeaderProps, TearsheetNavigationBarProps, TearsheetScrollButtonProps } from './TearsheetHeader'; import { TearsheetHeaderContentProps } from './TearsheetHeaderContent'; import { InfluencerProps, MainContentProps, SummaryContentProps, TearsheetBodyProps } from './TearsheetBody'; import { TearsheetHeaderActionItemProps, TearsheetHeaderActionsProps } from './TearsheetHeaderActions'; import { TearsheetFooterProps } from './TearsheetFooter'; /** * ---------- * Tearsheet * ---------- */ export interface TearsheetProps extends ComposedModalProps { children?: React.ReactNode; /** * Specifies whether the tearsheet is currently open. */ open?: boolean; /** * User can pass any class names to add to the modal wrapper */ className?: string; /** * User can pass any class names that will added to the modal container, rather than the wrapper */ containerClassName?: string; /** * the defines the gap from top of the view port. Defaulted to 3rem */ verticalGap?: string; /** * Default influencer takes 256px, this allow to override eg: 300px , 20rem */ influencerWidth?: string; /** * Default rightContent takes 256px, this allow to override eg: 300px , 20rem */ summaryContentWidth?: string; /** * Default to wide variant. Pass in narrow for narrow tearsheet */ variant?: 'wide' | 'narrow'; /** * Optional prop that allows you to pass any component. */ decorator?: ReactNode; /** * Specify the CSS selectors that match the floating menus. * * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management */ selectorsFloatingMenus?: string[]; /** * The aria label applied to the tearsheet */ ariaLabel?: string; /** * An optional handler that is called when the user closes the tearsheet (by * clicking the close button, if enabled, or clicking outside, if enabled). * Returning `false` here prevents the modal from closing. */ onClose?: () => void; /** * Specify a CSS selector that matches the DOM element that should be * focused when the Modal opens. */ selectorPrimaryFocus?: string; /** * The DOM element that the tearsheet should be rendered within. Defaults to document.body. */ portalTarget?: HTMLElement; /** * Disable the portal behavior and render the tearsheet in the existing DOM structure. * This is useful for testing, when you need to inherit React context from parent components, * or when you don't need the z-index isolation that portals provide. * @default false */ disablePortal?: boolean; /** * If true, the tearsheet will remain mounted in the DOM when closed, using CSS to hide it. * By default (false), the tearsheet unmounts from the DOM after the exit animation completes. * Set to true if you need to preserve component state or avoid remounting overhead. */ keepMounted?: boolean; } export type TearsheetComponentType = React.ForwardRefExoticComponent> & { Header: FC; HeaderContent: FC; Influencer: FC; NavigationBar: FC; ScrollButton: FC; HeaderActions: FC; HeaderActionItem: FC; MainContent: FC; SummaryContent: FC; Body: FC; Footer: FC; }; /** * Wrapper component that handles presence logic and conditionally renders TearsheetInternal. * This ensures that all component state and effects are only initialized when the tearsheet is present. */ export declare const Tearsheet: TearsheetComponentType; //# sourceMappingURL=Tearsheet.d.ts.map