@carbon/ibm-products
Version:
Carbon for IBM Products
90 lines • 3.14 kB
TypeScript
/**
* Copyright IBM Corp. 2022, 2023
*
* 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, PropsWithChildren } from 'react';
export type FormContextType = {
currentForm: number;
setFormTitle: () => void;
};
export declare const FormContext: React.Context<FormContextType>;
export declare const FormNumberContext: React.Context<number>;
interface EditTearsheetProps extends PropsWithChildren {
/**
* The cancel button text
*/
cancelButtonText?: string;
/**
* The main content of the tearsheet
*/
children?: ReactNode;
/**
* An optional class or classes to be added to the outermost element.
*/
className?: string;
/**
* A description of the flow, displayed in the header area of the tearsheet.
*/
description?: ReactNode;
/**
* Used to set the size of the influencer
*/
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;
/**
* 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?: () => boolean | void;
/**
* An optional handler that is called when a user changes forms via clicking
* an influencer nav item.
* Returns the index of the selected form.
*/
onFormChange?: (formIndex: number) => number;
/**
* Specify a handler for submitting the tearsheet. Throughout its execution
* the submit button will be disabled and include a loading indicator.
*/
onRequestSubmit: () => void;
/**
* Specifies whether the tearsheet is currently open.
*/
open?: boolean;
/**
* Specifies the aria label for the SideNav from Carbon UIShell
*/
sideNavAriaLabel?: string;
/**
* 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';
}
/**
* **This component is deprecated.** <br>
* Use Tearsheet with medium to complex edits. See usage guidance for further information.
* @deprecated
*/
export declare const EditTearsheet: React.ForwardRefExoticComponent<EditTearsheetProps & React.RefAttributes<HTMLDivElement>>;
export {};
//# sourceMappingURL=EditTearsheet.d.ts.map