react-a11y-dialog/dist/react-a11y-dialog.d.ts

A React component wrapper and React hook around a11y-dialog.

import A11yDialogLib from 'a11y-dialog';
import * as React from 'react';
export type { A11yDialogInstance } from 'a11y-dialog';
export type ReactA11yDialogProps = {
    /**
     * The `role` attribute of the dialog element, either `dialog` (default) or
     * `alertdialog` to make it a modal (preventing closing on click outside of
     * ESC key).
     */
    role?: 'dialog' | 'alertdialog';
    /**
     * The HTML `id` attribute of the dialog element, internally used by
     * a11y-dialog to manipulate the dialog.
     */
    id: string;
    /**
     * The title of the dialog, mandatory in the document to provide context to
     * assistive technology. Could be hidden (while remaining accessible) with
     * CSS though.
     */
    title: React.ReactNode;
    /**
     * A ref callback called when the component has mounted, receiving the instance
     * of A11yDialog so that it can be programmatically accessed later on.
     *
     * @example
     * const dialogRef = React.useRef();
     * // ...
     * dialogRef={(instance) => (dialogRef.current = instance)}
     */
    dialogRef?: (instance?: A11yDialogLib) => unknown;
    /**
     * Container for the portal's content to be rendered into;
     * this needs to be an existing valid DOM node and default sto the body element.
     */
    dialogRoot?: Element | string;
    /**
     * The HTML `id` attribute of the dialog’s title element, used by assistive
     * technologies to provide context and meaning to the dialog window.
     *
     * Falls back to the `${props.id}-title` if not provided.
     */
    titleId?: string;
    /**
     * The HTML `aria-label` attribute of the close button, used by assistive
     * technologies to provide extra meaning to the usual cross-mark.
     *
     * Defaults to a generic English explanation.
     */
    closeButtonLabel?: string;
    /**
     * The string that is the innerHTML of the close button.
     */
    closeButtonContent?: React.ReactNode;
    /**
     * Whether the close button should be rendered as first/last children or not at all.
     */
    closeButtonPosition?: 'first' | 'last' | 'none';
    /**
     * Object of classes for each HTML element of the dialog element.
     *
     * @see https://a11y-dialog.netlify.app/usage/markup
     */
    classNames?: {
        container?: string;
        overlay?: string;
        dialog?: string;
        title?: string;
        closeButton?: string;
    };
    /**
     * Dialog content.
     *
     * Anything that can be rendered: numbers, strings, elements or an array
     * (or fragment) containing these types.
     */
    children: React.ReactNode;
};
type Attributes = {
    container: React.HTMLAttributes<HTMLDivElement> & {
        ref: React.LegacyRef<HTMLDivElement>;
    };
    overlay: React.HTMLAttributes<HTMLDivElement>;
    dialog: React.HTMLAttributes<HTMLDivElement>;
    closeButton: React.ButtonHTMLAttributes<HTMLButtonElement>;
    title: React.HTMLAttributes<HTMLElement>;
};
type UseA11yDialogProps = Pick<ReactA11yDialogProps, 'role' | 'id' | 'titleId'>;
export declare const useA11yDialog: (props: UseA11yDialogProps) => [A11yDialogLib | null, Attributes];
export declare const A11yDialog: React.FC<ReactA11yDialogProps>;