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

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2021, 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, { Dispatch, PropsWithChildren, ReactNode, SetStateAction } from 'react';
import { ExperimentalSecondarySubmit } from './CreateTearsheetStep';
export interface StepsContextType {
    currentStep: number;
    setExperimentalSecondarySubmit: Dispatch<SetStateAction<ExperimentalSecondarySubmit | undefined>>;
    setIsDisabled: Dispatch<SetStateAction<boolean>>;
    setOnPrevious: (fn: any) => void;
    setOnNext: (fn: any) => void;
    setOnMount: (fn: any) => void;
    setSecondaryButtonDisabled?: Dispatch<SetStateAction<boolean>>;
    setStepData: Dispatch<SetStateAction<Step[]>>;
    stepData: Step[];
}
export declare const StepsContext: React.Context<StepsContextType>;
export declare const StepNumberContext: React.Context<number>;
export interface CreateTearsheetProps extends PropsWithChildren {
    /**
     * The back button text
     */
    backButtonText: string;
    /**
     * The cancel button text
     */
    cancelButtonText: string;
    /**
     * The main content of the tearsheet
     */
    /**
     * An optional class or classes to be added to the outermost element.
     */
    className?: string;
    /**
     * The experimentalSecondary submit button text
     */
    experimentalSecondarySubmitText?: string;
    /**
     * Optional prop that allows you to pass any component.
     */
    decorator?: ReactNode;
    /**
     * Specifies elements to focus on first on render.
     */
    firstFocusElement?: string;
    /**
     * A description of the flow, displayed in the header area of the tearsheet.
     */
    description?: ReactNode;
    /**
     * Specify a CSS selector that matches the DOM element that should be
     * focused when the Modal opens.
     */
    selectorPrimaryFocus?: string;
    /**
     * To indicate an error occurred in the Tearsheet step
     * Used to pass this value to TearsheetShell
     */
    hasError?: boolean;
    /**
     * Used to set the size of the influencer
     */
    influencerWidth?: 'narrow' | 'wide';
    /**
     * This can be used to open the component to a step other than the first step.
     * For example, a create flow was previously in progress, data was saved, and
     * is now being completed.
     */
    initialStep?: number;
    /**
     * 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;
    /**
     * The next button text
     */
    nextButtonText: 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 handler for submitting the multi step tearsheet (final step).
     * This function can _optionally_ return a promise that is either resolved or rejected and the CreateTearsheet will handle the submitting state of the create button.
     */
    onRequestSubmit: () => void;
    /**
     * Specifies whether the tearsheet is currently open.
     */
    open?: boolean;
    /**
     * The submit button text
     */
    submitButtonText: string;
    /**
     * 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?: 'normal' | 'lower';
    /**
     * @deprecated Property replaced by `decorator`
     */
    slug?: ReactNode;
}
interface Step {
    introStep?: boolean;
    secondaryLabel?: string;
    shouldIncludeStep?: boolean;
    title?: string;
}
export declare const CreateTearsheet: React.ForwardRefExoticComponent<CreateTearsheetProps & React.RefAttributes<HTMLDivElement>>;
export {};
//# sourceMappingURL=CreateTearsheet.d.ts.map