@carbon/ibm-products
Version:
Carbon for IBM Products
110 lines • 4.3 kB
TypeScript
/**
* 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<TearsheetProps & React.RefAttributes<HTMLDivElement>> & {
Header: FC<TearsheetHeaderProps>;
HeaderContent: FC<TearsheetHeaderContentProps>;
Influencer: FC<InfluencerProps>;
NavigationBar: FC<TearsheetNavigationBarProps>;
ScrollButton: FC<TearsheetScrollButtonProps>;
HeaderActions: FC<TearsheetHeaderActionsProps>;
HeaderActionItem: FC<TearsheetHeaderActionItemProps>;
MainContent: FC<MainContentProps>;
SummaryContent: FC<SummaryContentProps>;
Body: FC<TearsheetBodyProps>;
Footer: FC<TearsheetFooterProps>;
};
/**
* 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