@carbon/ibm-products/lib/components/Tearsheet/next/Tearsheet.d.ts

Carbon for IBM Products

/**
 * 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 { type ComposedModalProps } from '@carbon/react';
import { type TearsheetHeaderProps, type TearsheetNavigationBarProps, type TearsheetScrollButtonProps } from './TearsheetHeader';
import { type TearsheetHeaderContentProps } from './TearsheetHeaderContent';
import { type InfluencerProps, type MainContentProps, type SummaryContentProps, type TearsheetBodyProps } from './TearsheetBody';
import { type TearsheetHeaderActionItemProps, type TearsheetHeaderActionsProps } from './TearsheetHeaderActions';
import { type TearsheetFooterProps } from './TearsheetFooter';
/**
 * ----------
 * Tearsheet
 * ----------
 */
export interface TearsheetProps extends ComposedModalProps {
    children?: React.ReactNode;
    /**
     * Whether the tearsheet is currently open.
     */
    open?: boolean;
    /**
     * Optional class names added to the modal wrapper.
     */
    className?: string;
    /**
     * Optional class names added to the modal container (not the wrapper).
     */
    containerClassName?: string;
    /**
     * Gap from the top of the viewport. Defaults to `88px`.
     */
    verticalGap?: string;
    /**
     * Override the default influencer width (`256px`). Accepts any valid CSS
     * length, e.g. `"300px"` or `"20rem"`.
     */
    influencerWidth?: string;
    /**
     * Override the default summary content width (`256px`).
     */
    summaryContentWidth?: string;
    /**
     * Tearsheet variant. Defaults to `"wide"`.
     */
    variant?: 'wide' | 'narrow';
    /**
     * Optional decorator component (e.g. `AILabel`).
     */
    decorator?: ReactNode;
    /**
     * CSS selectors that match floating menus inside the tearsheet.
     *
     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
     */
    selectorsFloatingMenus?: string[];
    /**
     * Accessible label for the tearsheet dialog.
     */
    ariaLabel?: string;
    /**
     * Called when the user dismisses the tearsheet. Return `false` to prevent
     * the tearsheet from closing.
     */
    onClose?: () => void;
    /**
     * CSS selector for the element that should receive focus when the tearsheet
     * opens.
     */
    selectorPrimaryFocus?: string;
    /**
     * DOM element to portal the tearsheet into. Defaults to `document.body`.
     */
    portalTarget?: HTMLElement;
    /**
     * Disable the portal and render the tearsheet inline. Useful for tests and
     * contexts where you need to inherit React context from parent components.
     *
     * @default false
     */
    disablePortal?: boolean;
    /**
     * When `true`, the tearsheet stays mounted in the DOM when closed and is
     * hidden via CSS only. Use this to preserve component state or avoid
     * remounting overhead.
     *
     * @default false
     */
    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