@carbon/ibm-products/lib/components/CreateFullPage/CreateFullPage.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, { ReactNode } from 'react';
import { StepsContextType } from '../CreateTearsheet/CreateTearsheet';
export declare const StepsContext: React.Context<StepsContextType | null>;
export declare const StepNumberContext: React.Context<number>;
interface HeaderBreadcrumb {
    /** breadcrumb item key */
    key: string;
    /** breadcrumb item label */
    label: string;
    /** breadcrumb item link */
    href?: string;
    /** breadcrumb item title tooltip */
    title?: string;
    /** Provide if this breadcrumb item represents the current page */
    isCurrentPage?: boolean;
}
type MaybePromise<T> = Promise<T> | T;
type CreateFullPageBreadcrumbsProps = {
    /** The header breadcrumbs */
    breadcrumbs?: null | undefined;
    /**
     * Label for open/close overflow button used for breadcrumb items that do not fit
     */
    breadcrumbsOverflowAriaLabel?: never;
    breadcrumbOverflowTooltipAlign?: never;
} | {
    /** The header breadcrumbs */
    breadcrumbs: HeaderBreadcrumb[];
    /**
     * Label for open/close overflow button used for breadcrumb items that do not fit
     */
    breadcrumbsOverflowAriaLabel: string;
    breadcrumbOverflowTooltipAlign?: string;
};
type CreateFullPageBaseProps = {
    /**
     * The back button text
     */
    backButtonText?: string;
    /**
     * The cancel button text
     */
    cancelButtonText: string;
    /**
     * The main content of the full page
     */
    children?: ReactNode;
    /**
     * Provide an optional class to be applied to the containing node.
     */
    className?: string;
    /**
     * Specifies elements to focus on first on render.
     */
    firstFocusElement?: string;
    /**
     * 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;
    /**	Maximum visible breadcrumb-items before overflow is used (values less than 1 are treated as 1) */
    maxVisibleBreadcrumbs?: number;
    /**
     * The primary 'danger' button text in the modal
     */
    modalDangerButtonText: string;
    /**
     * The description located below the title in the modal
     */
    modalDescription?: string;
    /**
     * The secondary button text in the modal
     */
    modalSecondaryButtonText: string;
    /**
     * The title located in the header of the modal
     */
    modalTitle: string;
    /**
     * The next button text
     */
    nextButtonText: string;
    /**
     * A prop to omit the trailing slash for the breadcrumbs
     */
    noTrailingSlash?: boolean;
    /**
     * onChange event for Progress Indicator in the Influencer
     * @param data step index
     */
    onClickInfluencerStep?: (data: number) => void;
    /**
     * An optional handler that is called when the user closes the full page (by
     * clicking the secondary button, located in the modal, which triggers after
     * clicking the ghost button in the modal
     */
    onClose?: () => void;
    /**
     * Specify a handler for submitting the multi step full page (final step).
     * This function can _optionally_ return a promise that is either resolved or rejected and the CreateFullPage will handle the submitting state of the create button.
     *
     * @returns Object - if you want to prevent the modal from closing, return an object with the property preventClose set to true
     */
    onRequestSubmit: () => MaybePromise<{
        preventClose?: boolean;
    } | void>;
    /**
     * A secondary title of the full page, displayed in the influencer area
     */
    secondaryTitle?: string;
    /**
     * @ignore
     * The aria label to be used for the UI Shell SideNav Carbon component
     */
    sideNavAriaLabel?: string;
    /**
     * The submit button text
     */
    submitButtonText: string;
    /**
     * The main title of the full page, displayed in the header area
     */
    title?: string;
};
export type CreateFullPageProps = CreateFullPageBaseProps & CreateFullPageBreadcrumbsProps;
/**
 * Use with creations that must be completed in order for a service to be usable.
 *
 * ### Grid
 *
 * The `CreateFullPage` component utilizes Carbons' grid system in the inner
content of the main section inside of the component. You can read more guidance
on the Carbon's grid system
[here](https://www.carbondesignsystem.com/guidelines/2x-grid/overview). You can
include `<Row>` and `<Column>` components inside of each `CreateFullPageStep`
component to get the desired affect.
 */
export declare let CreateFullPage: React.ForwardRefExoticComponent<CreateFullPageProps & React.RefAttributes<HTMLDivElement>>;
export {};