/** * 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'; interface TearsheetShellProps extends PropsWithChildren { actions?: TearsheetAction[]; 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). * * **Note:** This prop is only required if a close icon is shown, i.e. if * there are a no navigation actions and/or hasCloseIcon is true. */ closeIconDescription?: string; /** * Used to track the current step on components which use `StepsContext` and `TearsheetShell` */ currentStep?: number; /** * Optional prop that allows you to pass any component. */ decorator?: ReactNode; /** * 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, * (when this prop is omitted, or undefined or null) a tearsheet does not * display a close icon if there are navigation actions ("transactional * tearsheet") and displays one if there are no navigation actions ("passive * tearsheet"), and that behavior can be overridden if required by setting * this prop to either true or false. */ hasCloseIcon?: boolean; /** * To indicate an error occurred in the Tearsheet step * Mainly used by CreateTearsheet component to pass error state */ hasError?: boolean; /** * The content for the header actions area, displayed alongside the title in * the header area of the tearsheet. This is typically a drop-down, or a set * of small buttons, or similar. NB the headerActions is only applicable for * wide tearsheets. */ headerActions?: ReactNode; /** * The content for the influencer section of the tearsheet, displayed * alongside the main content. This is typically a menu, or filter, or * progress indicator, or similar. NB the influencer is only applicable for * wide tearsheets. */ influencer?: ReactNode; /** * The position of the influencer section, 'left' or 'right'. */ influencerPosition?: 'left' | 'right'; /** * The width of the influencer: 'narrow' (the default) is 256px, and 'wide' * is 320px. */ 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; /** * Provide a ref to return focus to once the tearsheet is closed. */ launcherButtonRef?: RefObject; /** * Navigation content, such as a set of tabs, to be displayed at the bottom * of the header area of the tearsheet. NB the navigation is only applicable * for wide tearsheets. */ navigation?: 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?: () => 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[]; /** * Specifies the width of the tearsheet, 'narrow' or 'wide'. */ size: 'narrow' | 'wide'; /** * The main title of the tearsheet, displayed in the header area. */ title?: ReactNode; verticalPosition?: 'normal' | 'lower'; /** * @deprecated Property replaced by `decorator` */ slug?: ReactNode; } export declare const tearsheetShellWideProps: string[]; export declare const tearsheetIsPassive: (actions: any) => boolean; export declare const tearsheetHasCloseIcon: (actions: any, hasCloseIcon: any) => any; /** * TearSheetShell is used internally by TearSheet and TearSheetNarrow * * The component is not public. * * See the canvas tab for the component API details. * */ export declare const TearsheetShell: React.ForwardRefExoticComponent>; export declare const portalType: PropTypes.Requireable; export declare const deprecatedProps: { /** * @deprecated Property replaced by `decorator` */ slug: (props: any, propName: any, comp: any, loc: any, propFullName: any, secret: any) => any; /** * **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; }; export {}; //# sourceMappingURL=TearsheetShell.d.ts.map