`<Dialog>`

Creates a non-modal dialog.

There is currently no non-modal pattern in the ARIA Authoring Practices guidelines however there is an in-progress data picker pattern that is similar.

The component follows this pattern:

The dialog should be opened by a control with a role of button
The button should have an aria-expanded attribute
The button should have an aria-haspopup attribute with the value dialog.
The dialog must be labelled
The dialog should receive focus when opened.
The dialog must be closed if Esc is pressed
The dialog should include a close button
Closing the dialog should return the browser focus to the element that opened it
The dialog tabbing order should follow the control that opened it.

Usage

const [open, setOpen] = useState(false);
<button
  type="button"
  aria-haspopup="dialog"
  aria-expanded={open}
  onClick={() => setOpen(!open)}
>
  Show
</button>;

{
  open && (
    <Dialog title="Title" onClose={() => setOpen(false)}>
      <p>Dialog contents</p>
    </Dialog>
  );
}

Props

Prop	Type	Default	Purpose
actions	Node		Add additional content before the close button
active	Boolean	`true`	If set to false, the dialog is considered not active and will not close on Escape
arrow	Node		Adds content above the header. Intended for an arrow when positioning.
children	Node		Dialog contents
className	String	`null`	Class name of dialog. Added in addition to BEM classes.
classPrefix	String	`"react-dialogs-dialog"`	Class prefix for BEM classes
focus	Boolean	`true`	Set false to disable focusing the dialog when rendered
id	String	Random value	The id of the dialog
onClose	Function		Called when the dialog is closed. If omitted the close button will not be rendered and `Esc` will not close the dialog
title	Node		The dialog title

Customisation

A number of props are provided to customise the appearance of the component.

The nameProps props allow you to add your own attributes to each part, potentially overriding those already present. This is a good way to add your own classes.

The NameComponent props allow you to replace or override each component. Pass a lower-case string to change the html element, or a full component if you want a more far reaching change. Bear-in-mind you will have to forwardRef the DialogComponent component.

<DialogComponent className={`${classPrefix}__dialog ${className}`} {...dialogProps}>           // <div>
  {arrow}                                                                                      // null
  <HeaderComponent className={`${classPrefix}__header`} {...headerProps} />                    // <div>
    <TitleComponent className={`${classPrefix}__title`} {...titleProps} />                     // <h2>
    {actions}                                                                                  // null
    <CloseButtonComponent className={`${classPrefix}__close-button`} {...closeButtonProps} />  // <button>
  </HeaderComponent>
  <BodyComponent className={`${classPrefix}__body`} {...bodyProps} />                          // <div>
    {children}
  </BodyComponent>
</DialogComponent>