@stratakit/structures/dist/Dialog.d.ts

Medium-sized component structures for the Strata design system

import * as React from "react";
import * as AkDialog from "@ariakit/react/dialog";
import type { BaseProps, FocusableProps } from "@stratakit/foundations/secret-internals";
interface DialogRootProps extends BaseProps, Pick<AkDialog.DialogProps, "open" | "onClose" | "backdrop" | "unmountOnHide" | "hideOnInteractOutside"> {
    /**
     * When set to `true`, the content element will be unmounted and removed from
     * the DOM when it's hidden.
     *
     * @default true
     */
    unmountOnHide?: boolean;
    /**
     * Determines whether the dialog is modal.
     * Currently, only modal dialogs are supported.
     */
    modal: true;
}
/**
 * A modal dialog component used to display content in a window overlay. Must include `Dialog.Header` and `Dialog.Content` as direct
 * descendants. Additionally, `Dialog.Footer` can be optionally used as a direct descendant.
 *
 * Example:
 * ```tsx
 * const [open, setOpen] = useState(false);
 *
 * <Dialog.Root modal={true} open={open} onClose={() => setOpen(false)}>
 *   <Dialog.Heading>Heading</Dialog.Heading>
 *   <Dialog.Content>Content</Dialog.Content>
 *   <Dialog.Footer>
 *     <Dialog.ActionList
 *       actions={[
 *         <Button key="ok" onClick={() => setOpen(false)}>Ok</Button>,
 *       ]}
 *     />
 *
 *   </Dialog.Footer>
 * </Dialog.Root>
 * ```
 */
declare const DialogRoot: React.ForwardRefExoticComponent<DialogRootProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface DialogHeaderProps extends BaseProps {
}
/**
 * The header of a dialog. Should be used as a child of `Dialog.Root`. Must include `Dialog.Heading` as a direct
 * descendant. Additionally, `Dialog.CloseButton` can be optionally used as a direct descendant.
 *
 * Example:
 * ```tsx
 * <Dialog.Header>
 *   <Dialog.Heading>Heading</Dialog.Heading>
 *   <Dialog.CloseButton />
 * </Dialog.Header>
 * ```
 *
 * Use `render` prop when only a heading is displayed in a header.
 *
 * ```tsx
 * <Dialog.Header render={<Dialog.Heading />}>Heading</Dialog.Header>
 * ```
 *
 */
declare const DialogHeader: React.ForwardRefExoticComponent<DialogHeaderProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface DialogHeadingProps extends BaseProps<"h1"> {
}
/**
 * The heading of a dialog. Should be used as a child of `Dialog.DialogHeader`.
 *
 * Example:
 * ```tsx
 * <Dialog.Heading>Heading</Dialog.Heading>
 * ```
 */
declare const DialogHeading: React.ForwardRefExoticComponent<DialogHeadingProps & React.RefAttributes<HTMLElement | HTMLHeadingElement>>;
interface DialogCloseButtonProps extends Omit<FocusableProps<"button">, "children"> {
    /**
     * Label for the close button.
     *
     * @default "Dismiss"
     */
    label?: string;
}
/**
 * A button that closes the dialog. Displayed as an icon button in the top-right corner of the dialog.
 * Should be used as a child of `Dialog.DialogHeader`.
 *
 * Example:
 * ```tsx
 * <Dialog.CloseButton />
 * ```
 */
declare const DialogCloseButton: React.ForwardRefExoticComponent<DialogCloseButtonProps & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
interface DialogContentProps extends BaseProps {
}
/**
 * The content of a dialog. Should be used as a child of `Dialog.Root`.
 *
 * Example:
 * ```tsx
 * <Dialog.Content>Content</Dialog.Content>
 * ```
 */
declare const DialogContent: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface DialogFooterProps extends BaseProps {
}
/**
 * The footer section of a dialog, typically used to display action buttons at the bottom of the dialog.
 * Should be used as a child of `Dialog.Root`. Use `Dialog.ActionList` as a direct descendant to display a list of actions.
 *
 * Example:
 * ```tsx
 * <Dialog.Footer>
 *   <Dialog.ActionList
 *     actions={[
 *       <Button key="cancel" onClick={() => setOpen(false)}>Cancel</Button>,
 *       <Button key="ok" tone="accent" onClick={() => setOpen(false)}>Ok</Button>,
 *     ]}
 *   />
 * </Dialog.Footer>
 * ```
 */
declare const DialogFooter: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface DialogActionListProps extends Omit<BaseProps, "children"> {
    /**
     * The actions available for the dialog. Must be a list of `Button` components.
     */
    actions?: React.ReactNode[];
}
/**
 * A container for action buttons in a dialog. Should be used as a child of `Dialog.Footer`.
 *
 * Example:
 * ```tsx
 * <Dialog.ActionList
 *   actions={[
 *     <Button key="cancel" onClick={() => setOpen(false)}>Cancel</Button>,
 *     <Button key="ok" tone="accent" onClick={() => setOpen(false)}>Ok</Button>,
 *   ]}
 * />
 * ```
 */
declare const DialogActionList: React.ForwardRefExoticComponent<DialogActionListProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
interface DialogBackdropProps extends BaseProps {
}
/**
 * The backdrop of a dialog. Should be passed into the `backdrop` prop of `Dialog.Root`.
 *
 * Example:
 * ```tsx
 * <Dialog.Root modal={true} backdrop={<Dialog.Backdrop />} />
 * ```
 */
declare const DialogBackdrop: React.ForwardRefExoticComponent<DialogBackdropProps & React.RefAttributes<HTMLDivElement | HTMLElement>>;
export { DialogActionList as ActionList, DialogBackdrop as Backdrop, DialogCloseButton as CloseButton, DialogContent as Content, DialogFooter as Footer, DialogHeader as Header, DialogHeading as Heading, DialogRoot as Root, };