@navikt/ds-react/esm/dialog/root/DialogRoot.d.ts

React components from the Norwegian Labour and Welfare Administration.

import React from "react";
import { DialogBody, DialogBodyProps } from "../body/DialogBody.js";
import { DialogCloseTrigger, DialogCloseTriggerProps } from "../close-trigger/DialogCloseTrigger.js";
import { DialogDescription, DialogDescriptionProps } from "../description/DialogDescription.js";
import { DialogFooter, DialogFooterProps } from "../footer/DialogFooter.js";
import { DialogHeader, DialogHeaderProps } from "../header/DialogHeader.js";
import { DialogPopup, DialogPopupProps } from "../popup/DialogPopup.js";
import { DialogTitle, DialogTitleProps } from "../title/DialogTitle.js";
import { DialogTrigger, DialogTriggerProps } from "../trigger/DialogTrigger.js";
interface DialogProps {
    children: React.ReactNode;
    /**
     * Whether the dialog is currently open.
     */
    open?: boolean;
    /**
     * Whether the dialog should be initially open.
     *
     * To render a controlled dialog, use the `open` prop instead.
     * @default false
     */
    defaultOpen?: boolean;
    /**
     * Event handler called when the dialog is opened or closed.
     */
    onOpenChange?: (nextOpen: boolean, event: Event) => void;
    /**
     * Event handler called after any animations complete when the dialog is opened or closed.
     */
    onOpenChangeComplete?: (open: boolean) => void;
    /**
     * Updates sub-component padding + DialogTitle and DialogDescription font-size.
     * @default "medium"
     */
    size?: "medium" | "small";
}
interface DialogComponent extends React.FC<DialogProps> {
    /**
     * @see 🏷️ {@link DialogTriggerProps}
     * @example
     * ```jsx
     *  <Dialog>
     *    <Dialog.Trigger>
     *      <Button>Open dialog</Button>
     *    </Dialog.Trigger>
     *  </Dialog>
     * ```
     */
    Trigger: typeof DialogTrigger;
    /**
     * @see 🏷️ {@link DialogCloseTriggerProps}
     * @example
     * ```jsx
     *  <Dialog>
     *    <Dialog.Popup>
     *      <Dialog.CloseTrigger>
     *        <Button>Close dialog</Button>
     *      </Dialog.CloseTrigger>
     *    </Dialog.Popup>
     *  </Dialog>
     * ```
     */
    CloseTrigger: typeof DialogCloseTrigger;
    /**
     * @see 🏷️ {@link DialogPopupProps}
     * @example
     * ```jsx
     *  <Dialog>
     *    <Dialog.Popup>
     *      ...
     *    </Dialog.Popup>
     *  </Dialog>
     * ```
     */
    Popup: typeof DialogPopup;
    /**
     * @see 🏷️ {@link DialogHeaderProps}
     * @example
     * ```jsx
     *  <Dialog>
     *    <Dialog.Popup>
     *      <Dialog.Header>
     *        <Dialog.Title>Dialog title</Dialog.Title>
     *      </Dialog.Header>
     *    </Dialog.Popup>
     *  </Dialog>
     * ```
     */
    Header: typeof DialogHeader;
    /**
     * @see 🏷️ {@link DialogTitleProps}
     * @example
     * ```jsx
     *  <Dialog>
     *    <Dialog.Popup>
     *      <Dialog.Header>
     *        <Dialog.Title>Dialog title</Dialog.Title>
     *      </Dialog.Header>
     *    </Dialog.Popup>
     *  </Dialog>
     * ```
     */
    Title: typeof DialogTitle;
    /**
     * @see 🏷️ {@link DialogDescriptionProps}
     * @example
     * ```jsx
     *  <Dialog>
     *    <Dialog.Popup>
     *      <Dialog.Header>
     *        <Dialog.Title>Dialog title</Dialog.Title>
     *        <Dialog.Description>Dialog description</Dialog.Description>
     *      </Dialog.Header>
     *    </Dialog.Popup>
     *  </Dialog>
     * ```
     */
    Description: typeof DialogDescription;
    /**
     * @see 🏷️ {@link DialogBodyProps}
     * @example
     * ```jsx
     *  <Dialog>
     *    <Dialog.Popup>
     *      <Dialog.Body>
     *        Dialog body content
     *      </Dialog.Body>
     *    </Dialog.Popup>
     *  </Dialog>
     * ```
     */
    Body: typeof DialogBody;
    /**
     * @see 🏷️ {@link DialogFooterProps}
     * @example
     * ```jsx
     *  <Dialog>
     *    <Dialog.Popup>
     *      <Dialog.Footer>
     *        <Dialog.CloseTrigger>
     *          <Button>Close dialog</Button>
     *        </Dialog.CloseTrigger>
     *      </Dialog.Footer>
     *    </Dialog.Popup>
     *  </Dialog>
     * ```
     */
    Footer: typeof DialogFooter;
}
/**
 * Dialog component for displaying modal content on top of an application.
 * @see [📝 Documentation](https://aksel.nav.no/komponenter/core/dialog)
 * @see 🏷️ {@link DialogProps}
 * @example
 * ```jsx
 *  <Dialog>
 *    <Dialog.Trigger>
 *      <Button>Open dialog</Button>
 *    </Dialog.Trigger>
 *    <Dialog.Popup>
 *      <Dialog.Header>
 *        <Dialog.Title>Dialog title</Dialog.Title>
 *        <Dialog.Description>Dialog description</Dialog.Description>
 *      </Dialog.Header>
 *      <Dialog.Body>
 *        Dialog body content
 *      </Dialog.Body>
 *      <Dialog.Footer>
 *        <Dialog.CloseTrigger>
 *          <Button>Close dialog</Button>
 *        </Dialog.CloseTrigger>
 *      </Dialog.Footer>
 *    </Dialog.Popup>
 *  </Dialog>
 * ```
 */
export declare const Dialog: DialogComponent;
export default Dialog;
export { DialogTrigger, DialogCloseTrigger, DialogHeader, DialogTitle, DialogDescription, DialogBody, DialogFooter, DialogPopup, };
export type { DialogProps, DialogTriggerProps, DialogCloseTriggerProps, DialogHeaderProps, DialogTitleProps, DialogDescriptionProps, DialogBodyProps, DialogFooterProps, DialogPopupProps, };