/** * 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>; setIsDisabled: Dispatch>; setOnPrevious: (fn: any) => void; setOnNext: (fn: any) => void; setOnMount: (fn: any) => void; setSecondaryButtonDisabled?: Dispatch>; setStepData: Dispatch>; stepData: Step[]; } export declare const StepsContext: React.Context; export declare const StepNumberContext: React.Context; 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>; export {}; //# sourceMappingURL=CreateTearsheet.d.ts.map