import { Accessibility } from '@fluentui/accessibility'; import { ComponentWithAs, FocusTrapZoneProps } from '@fluentui/react-bindings'; import { UIComponentProps, ContentComponentProps } from '../../utils'; import { ComponentEventHandler, ShorthandValue, FluentComponentStaticProps } from '../../types'; import { ButtonProps } from '../Button/Button'; import { BoxProps } from '../Box/Box'; import { HeaderProps } from '../Header/Header'; import { DialogFooter, DialogFooterProps } from './DialogFooter'; export interface DialogSlotClassNames { header: string; headerAction: string; content: string; overlay: string; footer: string; } export interface DialogProps extends UIComponentProps, ContentComponentProps> { /** Accessibility behavior if overridden by the user. */ accessibility?: Accessibility; /** A dialog can contain actions. */ actions?: ShorthandValue; /** A dialog can have a backdrop on its overlay. */ backdrop?: boolean; /** A dialog can contain a cancel button. */ cancelButton?: ShorthandValue; /** A dialog can be closed when a user clicks outside of it. */ closeOnOutsideClick?: boolean; /** A dialog can contain a confirm button. */ confirmButton?: ShorthandValue; /** A dialog can be open by default. */ defaultOpen?: boolean; /** A dialog can contain a header. */ header?: ShorthandValue; /** A dialog can contain a button next to the header. */ headerAction?: ShorthandValue; /** A dialog can contain a footer. */ footer?: ShorthandValue; /** * Called after a user clicks the cancel button. * @param event - React's original SyntheticEvent. * @param data - All props. */ onCancel?: ComponentEventHandler; /** * Called after a user clicks the confirm button. * @param event - React's original SyntheticEvent. * @param data - All props. */ onConfirm?: ComponentEventHandler; /** * Called after a user opens the dialog. * @param event - React's original SyntheticEvent. * @param data - All props. */ onOpen?: ComponentEventHandler; /** A dialog's open state can be controlled. */ open?: boolean; /** A dialog can contain a overlay. */ overlay?: ShorthandValue; /** Controls whether or not focus trap should be applied, using boolean or FocusTrapZoneProps type value. */ trapFocus?: boolean | FocusTrapZoneProps; /** Element to be rendered in-place where the dialog is defined. */ trigger?: JSX.Element; } export interface DialogState { contentId?: string; headerId?: string; open?: boolean; } export declare const dialogClassName = "ui-dialog"; export declare const dialogSlotClassNames: DialogSlotClassNames; export declare type DialogStylesProps = Required>; /** * A Dialog displays important information on top of a page which requires a user's attention, confirmation, or interaction. * Dialogs are purposefully interruptive, so they should be used sparingly. * * @accessibility * Implements [ARIA Dialog (Modal)](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal) design pattern. * @accessibilityIssues * [NVDA narrates dialog title and button twice](https://github.com/nvaccess/nvda/issues/10003) * [NVDA does not recognize the ARIA 1.1 values of aria-haspopup](https://github.com/nvaccess/nvda/issues/8235) * [Jaws does not announce token values of aria-haspopup](https://github.com/FreedomScientific/VFO-standards-support/issues/33) * [Issue 989517: VoiceOver narrates dialog content and button twice](https://bugs.chromium.org/p/chromium/issues/detail?id=989517) */ export declare const Dialog: ComponentWithAs<'div', DialogProps> & FluentComponentStaticProps & { Footer: typeof DialogFooter; };