@carbon/ibm-products
Version:
Carbon for IBM Products
114 lines (113 loc) • 4.87 kB
TypeScript
/**
* Copyright IBM Corp. 2021, 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, { PropsWithChildren } from 'react';
type fieldsetLegendTextProps = {
/**
* This optional prop will render your form content inside of a fieldset html element
* and is defaulted to true.
* You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
*/
hasFieldset: false;
/**
* This is the required legend text that appears above a fieldset html element for accessibility purposes.
* You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
* Otherwise, use CSS to hide/remove this label text.
*/
fieldsetLegendText?: string;
} | {
/**
* This optional prop will render your form content inside of a fieldset html element
* and is defaulted to true.
* You can set this prop to `false` if you have multiple fieldset elements or want to control the children of your Full Page's step content.
*/
hasFieldset?: true;
/**
* This is the required legend text that appears above a fieldset html element for accessibility purposes.
* You can set the `hasFieldset` prop to false if you have multiple fieldset elements or want to control the children of your Full Page's step content.
* Otherwise, use CSS to hide/remove this label text.
*/
fieldsetLegendText: string;
};
interface CreateTearsheetStepBaseProps extends PropsWithChildren {
/**
* Content that shows in the tearsheet step
*/
children?: React.ReactNode;
/**
* Sets an optional className to be added to the tearsheet step
*/
className?: string;
/**
* Sets an optional description on the step component
*/
description?: React.ReactNode;
/**
* This will conditionally disable the submit button in the multi step Tearsheet
*/
disableSubmit?: boolean;
/**
* Configuration options for customizing the behavior of the experimentalSecondary submit button.
*/
experimentalSecondarySubmit?: ExperimentalSecondarySubmit;
/**
* This prop is used to help track dynamic steps. If this value is `false` then the step is not included in the visible steps or the ProgressIndicator
* steps. If this value is `true` then the step will be included in the list of visible steps, as well as being included in the ProgressIndicator step list
*/
includeStep?: boolean;
/**
* This prop can be used on the first step to mark it as an intro step, which will not render the progress indicator steps
*/
introStep?: boolean;
/**
* This optional prop will indicate an error icon on the progress indicator step item
*/
invalid?: boolean;
/**
* Optional function to be called on initial mount of a step.
* For example, this can be used to fetch data that is required on a particular step.
*/
onMount?: () => void;
/**
* Optional function to be called when you move to the next step.
* For example, this can be used to validate input fields before proceeding to the next step.
* This function can _optionally_ return a promise that is either resolved or rejected and the CreateTearsheet will handle the submitting state of the next button.
*/
onNext?: () => Promise<void>;
/**
* Optional function to be called when you move to the previous step.
*/
onPrevious?: () => void;
/**
* Sets the optional secondary label on the progress step component
*/
secondaryLabel?: string;
/**
* Sets an optional subtitle on the step component
*/
subtitle?: string;
/**
* Sets the title text for a tearsheet step
*/
title: React.ReactNode;
}
type CreateTearsheetStepProps = CreateTearsheetStepBaseProps & fieldsetLegendTextProps;
/**
* Configuration options for customizing the behavior of the experimentalSecondary submit button.
*
* @property {string} [labelText] - Optional text to replace the default button text.
* @property {boolean} [disabled] - If true, the button will be disabled and not clickable.
* @property {boolean} [hideSecondarySubmit] - If true, the button will be hidden from view.
* @property {() => void} [onClick] - Optional click handler function to be executed when the button is clicked.
*/
export type ExperimentalSecondarySubmit = {
labelText?: string;
disabled?: boolean;
hideSecondarySubmit?: boolean;
onClick?: () => void;
};
export declare let CreateTearsheetStep: React.ForwardRefExoticComponent<CreateTearsheetStepProps & React.RefAttributes<unknown>>;
export {};