@carbon/ibm-products/lib/components/Tearsheet/TearsheetNarrow.d.ts

Carbon for IBM Products

/**
 * Copyright IBM Corp. 2020, 2024
 *
 * 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, ReactNode, RefObject } from 'react';
import PropTypes from 'prop-types';
import { TearsheetAction } from './Tearsheet';
export interface TearsheetNarrowProps extends PropsWithChildren {
    /**
     * The navigation actions to be shown as buttons in the action area at the
     * bottom of the tearsheet. Each action is specified as an object with
     * optional fields: 'label' to supply the button label, 'kind' to select the
     * button kind (must be 'primary', 'secondary' or 'ghost'), 'loading' to
     * display a loading indicator, and 'onClick' to receive notifications when
     * the button is clicked. Additional fields in the object will be passed to
     * the Button component, and these can include 'disabled', 'ref', 'className',
     * and any other Button props. Any other fields in the object will be passed
     * through to the button element as HTML attributes.
     *
     * See https://react.carbondesignsystem.com/?path=/docs/components-button--default#component-api
     */
    actions?: TearsheetAction[];
    /**
     * The aria-label for the tearsheet, which is optional.
     * if it is not passed, the title will be used as the aria-label.
     */
    ariaLabel?: string;
    /**
     * An optional class or classes to be added to the outermost element.
     */
    className?: string;
    /**
     * The accessibility title for the close icon (if shown).
     *
     */
    closeIconDescription?: string;
    /**
     * A description of the flow, displayed in the header area of the tearsheet.
     */
    description?: ReactNode;
    /**
     * Enable a close icon ('x') in the header area of the tearsheet. By default,
     * a tearsheet does not display a close icon, but one should be enabled if
     * the tearsheet is read-only or has no navigation actions (sometimes called
     * a "passive tearsheet").
     */
    hasCloseIcon?: boolean;
    /**
     * 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;
    /**
     * Provide a ref to return focus to once the tearsheet is closed.
     */
    launcherButtonRef?: RefObject<any>;
    /**
     * 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;
    /**
     * Specifies whether the tearsheet is currently open.
     */
    open?: boolean;
    /**
     * The DOM element that the tearsheet should be rendered within. Defaults to document.body.
     */
    portalTarget?: HTMLElement;
    /**
     * Specify a CSS selector that matches the DOM element that should be
     * focused when the Modal opens.
     */
    selectorPrimaryFocus?: string;
    /**
     * Specify the CSS selectors that match the floating menus.
     *
     * See https://react.carbondesignsystem.com/?path=/docs/components-composedmodal--overview#focus-management
     */
    selectorsFloatingMenus?: string[];
    /**
     * The main title of the tearsheet, displayed in the header area.
     */
    title?: ReactNode;
    /**
     * **Deprecated**
     *
     * The position of the top of tearsheet in the viewport. The 'normal'
     * position 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 (the default) provides a little extra room at the top
     * to allow an action bar navigation or breadcrumbs to also show through.
     */
    verticalPosition?: 'normal' | 'lower';
}
/**
 * A narrow tearsheet is a slimmer variant of the tearsheet, providing a dialog
 * that keeps users in-context and focused by bringing actionable content front
 * and center while revealing more of the UI behind it.
 *
 * A narrow tearsheet comprises 3 zones: a heading area including a title, the
 * main content area, and a set of action buttons.
 */
export declare const TearsheetNarrow: React.ForwardRefExoticComponent<TearsheetNarrowProps & React.RefAttributes<HTMLDivElement>>;
export declare const deprecatedProps: {
    /**
     * **Deprecated**
     *
     * The position of the top of tearsheet in the viewport. The 'normal'
     * position 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 (the default) provides a little extra room at the top
     * to allow an action bar navigation or breadcrumbs to also show through.
     */
    verticalPosition: PropTypes.Requireable<string>;
};
//# sourceMappingURL=TearsheetNarrow.d.ts.map