@carbon/ibm-products/es/components/Tearsheet/TearsheetShell.d.ts

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2024
 *
 * 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, { PropsWithChildren, ReactNode, RefObject } from 'react';
import { TearsheetAction } from './Tearsheet';
interface TearsheetShellProps extends PropsWithChildren {
    actions?: TearsheetAction[];
    ariaLabel?: string;
    /**
     * An optional class or classes to be added to the outermost element.
     */
    className?: string;
    /**
     * The accessibility title for the close icon (if shown).
     *
     * **Note:** This prop is only required if a close icon is shown, i.e. if
     * there are a no navigation actions and/or hasCloseIcon is true.
     */
    closeIconDescription?: string;
    /**
     * Used to track the current step on components which use `StepsContext` and `TearsheetShell`
     */
    currentStep?: number;
    /**
     * Optional prop that allows you to pass any component.
     */
    decorator?: ReactNode;
    /**
     * A description of the flow, displayed in the header area of the tearsheet.
     */
    description?: ReactNode;
    /**
     * Enable a close icon ('x') in the header area of the tearsheet. By default,
     * (when this prop is omitted, or undefined or null) a tearsheet does not
     * display a close icon if there are navigation actions ("transactional
     * tearsheet") and displays one if there are no navigation actions ("passive
     * tearsheet"), and that behavior can be overridden if required by setting
     * this prop to either true or false.
     */
    hasCloseIcon?: boolean;
    /**
     * To indicate an error occurred in the Tearsheet step
     * Mainly used by CreateTearsheet component to pass error state
     */
    hasError?: boolean;
    /**
     * The content for the header actions area, displayed alongside the title in
     * the header area of the tearsheet. This is typically a drop-down, or a set
     * of small buttons, or similar. NB the headerActions is only applicable for
     * wide tearsheets.
     */
    headerActions?: ReactNode;
    /**
     * The content for the influencer section of the tearsheet, displayed
     * alongside the main content. This is typically a menu, or filter, or
     * progress indicator, or similar. NB the influencer is only applicable for
     * wide tearsheets.
     */
    influencer?: ReactNode;
    /**
     * The position of the influencer section, 'left' or 'right'.
     */
    influencerPosition?: 'left' | 'right';
    /**
     * The width of the influencer: 'narrow' (the default) is 256px, and 'wide'
     * is 320px.
     */
    influencerWidth?: 'narrow' | 'wide';
    /**
     * A label for the tearsheet, displayed in the header area of the tearsheet
     * to maintain context for the tearsheet (e.g. as the title changes from page
     * to page of a multi-page task).
     */
    label?: ReactNode;
    /**
     * Provide a ref to return focus to once the tearsheet is closed.
     */
    launcherButtonRef?: RefObject<any>;
    /**
     * Navigation content, such as a set of tabs, to be displayed at the bottom
     * of the header area of the tearsheet. NB the navigation is only applicable
     * for wide tearsheets.
     */
    navigation?: ReactNode;
    /**
     * 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;
    /**
     * Specifies whether the tearsheet is currently open.
     */
    open?: boolean;
    /**
     * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
     */
    portalTarget?: HTMLElement;
    /**
     * Specify a CSS selector that matches the DOM element that should be
     * focused when the Modal opens.
     */
    selectorPrimaryFocus?: string;
    /**
     * Specify the CSS selectors that match the floating menus.
     *
     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
     */
    selectorsFloatingMenus?: string[];
    /**
     * Specifies the width of the tearsheet, 'narrow' or 'wide'.
     */
    size: 'narrow' | 'wide';
    /**
     * The main title of the tearsheet, displayed in the header area.
     */
    title?: ReactNode;
    verticalPosition?: 'normal' | 'lower';
    /**
     * @deprecated Property replaced by `decorator`
     */
    slug?: ReactNode;
}
export declare const tearsheetShellWideProps: string[];
export declare const tearsheetIsPassive: (actions: any) => boolean;
export declare const tearsheetHasCloseIcon: (actions: any, hasCloseIcon: any) => any;
/**
 *  TearSheetShell is used internally by TearSheet and TearSheetNarrow
 *
 * The component is not public.
 *
 * See the canvas tab for the component API details.
 * */
export declare const TearsheetShell: React.ForwardRefExoticComponent<TearsheetShellProps & React.RefAttributes<HTMLDivElement>>;
export declare const portalType: any;
export declare const deprecatedProps: {
    /**
     *  @deprecated Property replaced by `decorator`
     */
    slug: (props: any, propName: any, comp: any, loc: any, propFullName: any, secret: any) => any;
    /**
     * **Deprecated**
     *
     * The position of the top of tearsheet in the viewport. The 'normal'
     * position is a short distance down from the top of the
     * viewport, leaving room at the top for a global header bar to show through
     * from below. The 'lower' position (the default) provides a little extra room at the top
     * to allow an action bar navigation or breadcrumbs to also show through.
     */
    verticalPosition: any;
};
export {};