@carbon/ibm-products/lib/components/CreateTearsheetNarrow/CreateTearsheetNarrow.d.ts

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2021, 2021
 *
 * 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 } from 'react';
type VerticalPosition = 'normal' | 'lower';
export interface CreateTearsheetNarrowProps extends PropsWithChildren {
    /**
     * Provide the contents of the CreateTearsheetNarrow.
     */
    children: ReactNode;
    /**
     * Provide an optional class to be applied to the containing node.
     */
    className?: string;
    /**
     * A description of the flow, displayed in the header area of the tearsheet.
     */
    description?: ReactNode;
    /**
     * Specifies a boolean for disabling or enabling the primary button. This is important for form validation
     * Returning `true` prevents the primary button from being clicked until required fields are completed.
     */
    disableSubmit?: boolean;
    /**
     * Specifies an optional field that provides a additional context for a form
     */
    formDescription?: ReactNode;
    /**
     * Specifies a field that provides a title for a form
     */
    formTitle?: ReactNode;
    /**
     * 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;
    /**
     * 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.
     */
    onRequestClose?: () => void;
    /**
     * Specifies an optional handler which is called when the CreateTearsheetNarrow
     * primary button is pressed.
     */
    onRequestSubmit?: () => void;
    /**
     * Specifies whether the tearsheet is currently open.
     */
    open?: boolean;
    /**
     * Specifies the primary button's text in the CreateTearsheetNarrow.
     */
    primaryButtonText: string;
    /**
     * Specifies the secondary button's text in the CreateTearsheetNarrow.
     */
    secondaryButtonText: string;
    /**
     * Specifies which DOM element in the form should be focused.
     */
    selectorPrimaryFocus?: ReactNode;
    /**
     * The main title of the tearsheet, displayed in the header area.
     */
    title?: ReactNode;
    /**
     * The position of the top of tearsheet in the viewport. The 'normal'
     * position (the default) 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 provides a little extra room at the top
     * to allow an action bar navigation or breadcrumbs to also show through.
     */
    verticalPosition?: VerticalPosition;
}
/**
 * Use a narrow tearsheet as an alternative to a modal when there is scrolling.
 * Use when the form fields can be broken down into sections using section headers.
 */
export declare const CreateTearsheetNarrow: React.ForwardRefExoticComponent<CreateTearsheetNarrowProps & React.RefAttributes<unknown>>;
export {};
//# sourceMappingURL=CreateTearsheetNarrow.d.ts.map