@hypothesis/frontend-shared/lib/components/Dialog.d.ts

Shared components, styles and utilities for Hypothesis projects

/**
 * @typedef {import('preact').ComponentChildren} Children
 *
 * @typedef DialogProps
 * @prop {Children} [buttons] -
 *   Additional `Button` elements to display at the bottom of the dialog.
 *   A "Cancel" button is added automatically if the `onCancel` prop is set.
 * @prop {string} [cancelLabel] - Label for the cancel button
 * @prop {Children} children
 * @prop {string} [contentClass] - CSS class to apply to the dialog's content
 * @prop {string|symbol} [icon] - Name of optional icon to render in header
 * @prop {import("preact/hooks").Ref<HTMLElement>|null} [initialFocus] -
 *   Child element to focus when the dialog is rendered. If not provided,
 *   the Dialog's container will be automatically focused on opening. Set to
 *   `null` to opt out of automatic focus control.
 * @prop {() => void} [onCancel] -
 *   A callback to invoke when the user cancels the dialog. If provided, a
 *   "Cancel" button will be displayed.
 * @prop {'dialog'|'alertdialog'} [role] - The aria role for the dialog (defaults to" dialog")
 * @prop {string} title
 * @prop {boolean} [withCancelButton=true] - If `onCancel` is provided, render
 *   a Cancel button as one of the Dialog's buttons (along with any other
 *   `buttons`)
 * @prop {boolean} [withCloseButton=true] - If `onCancel` is provided, render
 *   a close button (X icon) in the Dialog's header
 */
/**
 * HTML control that can be disabled.
 *
 * @typedef {HTMLElement & { disabled: boolean }} InputElement
 */
/**
 * Render a "panel"-like interface with a title and optional icon and/or
 * close button. Grabs focus on initial render, defaulting to the entire
 * Dialog container element, or `initialFocus` HTMLElement if provided.
 *
 * @param {DialogProps} props
 */
export function Dialog({ buttons, cancelLabel, children, contentClass, icon, initialFocus, onCancel, role, title, withCancelButton, withCloseButton, }: DialogProps): import("preact").JSX.Element;
export type Children = import('preact').ComponentChildren;
export type DialogProps = {
    /**
     * -
     * Additional `Button` elements to display at the bottom of the dialog.
     * A "Cancel" button is added automatically if the `onCancel` prop is set.
     */
    buttons?: Children;
    /**
     * - Label for the cancel button
     */
    cancelLabel?: string | undefined;
    children: Children;
    /**
     * - CSS class to apply to the dialog's content
     */
    contentClass?: string | undefined;
    /**
     * - Name of optional icon to render in header
     */
    icon?: string | symbol | undefined;
    /**
     * -
     * Child element to focus when the dialog is rendered. If not provided,
     * the Dialog's container will be automatically focused on opening. Set to
     * `null` to opt out of automatic focus control.
     */
    initialFocus?: import("preact/hooks").Ref<HTMLElement> | null | undefined;
    /**
     * -
     * A callback to invoke when the user cancels the dialog. If provided, a
     * "Cancel" button will be displayed.
     */
    onCancel?: (() => void) | undefined;
    /**
     * - The aria role for the dialog (defaults to" dialog")
     */
    role?: "dialog" | "alertdialog" | undefined;
    title: string;
    /**
     * - If `onCancel` is provided, render
     * a Cancel button as one of the Dialog's buttons (along with any other
     * `buttons`)
     */
    withCancelButton?: boolean | undefined;
    /**
     * - If `onCancel` is provided, render
     * a close button (X icon) in the Dialog's header
     */
    withCloseButton?: boolean | undefined;
};
/**
 * HTML control that can be disabled.
 */
export type InputElement = HTMLElement & {
    disabled: boolean;
};