@fluentui/react-northstar
Version:
A themable React component library.
106 lines (105 loc) • 5.04 kB
TypeScript
import { Accessibility } from '@fluentui/accessibility';
import { FocusTrapZoneProps } from '@fluentui/react-bindings';
import * as PropTypes from 'prop-types';
import * as React from 'react';
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<ShorthandValue<BoxProps>> {
/** Accessibility behavior if overridden by the user. */
accessibility?: Accessibility;
/** A dialog can contain actions. */
actions?: ShorthandValue<BoxProps>;
/** A dialog can have a backdrop on its overlay. */
backdrop?: boolean;
/** A dialog can contain a cancel button. */
cancelButton?: ShorthandValue<ButtonProps>;
/** A dialog can be closed when a user clicks outside of it. */
closeOnOutsideClick?: boolean;
/** A dialog can contain a confirm button. */
confirmButton?: ShorthandValue<ButtonProps>;
/** A dialog can be open by default. */
defaultOpen?: boolean;
/** A dialog can contain a header. */
header?: ShorthandValue<HeaderProps>;
/** A dialog can contain a button next to the header. */
headerAction?: ShorthandValue<ButtonProps>;
/** A dialog can contain a footer. */
footer?: ShorthandValue<DialogFooterProps>;
/**
* Called after a user clicks the cancel button.
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onCancel?: ComponentEventHandler<DialogProps>;
/**
* Called after a user clicks the confirm button.
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onConfirm?: ComponentEventHandler<DialogProps>;
/**
* Called after a user opens the dialog.
* @param event - React's original SyntheticEvent.
* @param data - All props.
*/
onOpen?: ComponentEventHandler<DialogProps>;
/** A dialog's open state can be controlled. */
open?: boolean;
/** A dialog can contain a overlay. */
overlay?: ShorthandValue<BoxProps>;
/** 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<Pick<DialogProps, 'backdrop'>>;
/**
* 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: (<TExtendedElementType extends React.ElementType<any> = "div">(props: React.RefAttributes<HTMLDivElement> & Omit<import("@fluentui/react-bindings").PropsOfElement<TExtendedElementType>, "as" | keyof DialogProps> & {
as?: TExtendedElementType;
} & DialogProps) => JSX.Element) & {
propTypes?: React.WeakValidationMap<DialogProps> & {
as: React.Requireable<string | ((props: any, context?: any) => any) | (new (props: any, context?: any) => any)>;
};
contextTypes?: PropTypes.ValidationMap<any>; /** A dialog can contain a cancel button. */
defaultProps?: Partial<DialogProps & {
as: "div";
}>;
displayName?: string;
readonly __PRIVATE_PROPS?: React.RefAttributes<HTMLDivElement> & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & {
ref?: React.Ref<HTMLDivElement>;
}, "as" | keyof DialogProps> & {
/** A dialog can contain a header. */
as?: "div";
} & DialogProps;
} & FluentComponentStaticProps<DialogProps> & {
Footer: typeof DialogFooter;
};