import type { ElementType, ReactNode, AriaRole } from 'react'; import type { PolymorphicProps } from '../../types'; import type { ButtonOwnProps } from '../Button/types'; import type { CloseButtonRenderProps } from '../../hooks/useCloseButton'; /** * Props for Dialog * @remarks Fully accessible, headless component */ export interface DialogProps { /** * Custom base ID for ARIA relationships. * If not provided, one will be generated automatically. * Sub-element IDs are derived as `${id}-title`, `${id}-description`, `${id}-content`. */ id?: string; /** * Controlled open state */ open?: boolean; /** * Callback when open state changes * @param open - The new open state */ onOpenChange?: (open: boolean) => void; /** * Initial open state (uncontrolled) * @defaultValue false */ defaultOpen?: boolean; /** * Whether dialog is modal (blocks interaction outside) * @defaultValue true */ modal?: boolean; /** * Disables all dialog triggers (prevents opening) * @defaultValue false */ disabled?: boolean; /** * Always render portal/overlay/content (for animation libraries) * @defaultValue false */ forceMount?: boolean; /** * Dialog trigger and portal components */ children?: ReactNode; } /** * Render props provided to children function for DialogTrigger */ export interface DialogTriggerRenderProps { /** * Whether the dialog is currently open */ isOpen: boolean; /** * Whether the dialog trigger is disabled */ disabled: boolean; /** * Function to open the dialog. * No-op while the trigger is disabled (`onOpenChange` is not called). */ open: () => void; /** * Function to close the dialog */ close: () => void; /** * Function to toggle the dialog open/closed state. * No-op while the trigger is disabled (`onOpenChange` is not called). */ toggle: () => void; } /** * Own props for DialogTrigger */ export interface DialogTriggerOwnProps extends ButtonOwnProps { /** * Children content or render function */ children?: ReactNode | ((state: DialogTriggerRenderProps) => ReactNode); } /** * Props for DialogTrigger * @remarks Fully accessible, headless component */ export type DialogTriggerProps = PolymorphicProps<'button', T, DialogTriggerOwnProps>; /** * Render props provided to children function for DialogClose * @remarks Alias of {@link CloseButtonRenderProps} from useCloseButton */ export type DialogCloseRenderProps = CloseButtonRenderProps; /** * Own props for DialogOverlay */ export interface DialogOverlayOwnProps { /** * Portal container element. Content is portaled to document.body by default. * @defaultValue document.body */ container?: HTMLElement | null; } /** * Props for DialogOverlay * @remarks Fully accessible, headless component */ export type DialogOverlayProps = PolymorphicProps<'div', T, DialogOverlayOwnProps>; /** * Own props for DialogContent */ export interface DialogContentOwnProps { /** * ARIA role for dialog type * @defaultValue 'dialog' */ role?: AriaRole; /** * Portal container element. Content is portaled to document.body by default. * @defaultValue document.body */ container?: HTMLElement | null; /** * Enable focus trapping * @defaultValue true */ trapFocus?: boolean; /** * Restore focus on close * @defaultValue true */ restoreFocus?: boolean; /** * Element to focus on open */ initialFocus?: HTMLElement | (() => HTMLElement); /** * Element to focus on close */ finalFocus?: HTMLElement | (() => HTMLElement); /** * Callback before auto-focus * @param event - The focus event (call preventDefault to prevent auto-focus) */ onOpenAutoFocus?: (event: Event) => void; /** * Callback before focus restore * @param event - The focus event (call preventDefault to prevent focus restore) */ onCloseAutoFocus?: (event: Event) => void; /** * Escape key handler * @param event - The keyboard event (call preventDefault to prevent close) */ onEscapeKeyDown?: (event: KeyboardEvent) => void; /** * Outside click handler * @param event - The pointer event (call preventDefault to prevent close) */ onPointerDownOutside?: (event: PointerEvent) => void; /** * Outside interaction handler with preventDefault capability * @param event - The pointer event (call preventDefault to prevent close) */ onInteractOutside?: (event: PointerEvent) => void; } /** * Props for DialogContent * @remarks Fully accessible, headless component */ export type DialogContentProps = PolymorphicProps<'div', T, DialogContentOwnProps>; /** * Own props for DialogTitle */ export interface DialogTitleOwnProps { /** * Heading level (1-6) * @defaultValue 2 */ level?: number; } /** * Props for DialogTitle * @remarks Fully accessible, headless component */ export type DialogTitleProps = PolymorphicProps<'h2', T, DialogTitleOwnProps>; /** * Props for DialogDescription * @remarks Fully accessible, headless component */ export type DialogDescriptionProps = PolymorphicProps<'p', T>; /** * Own props for DialogClose */ export interface DialogCloseOwnProps extends ButtonOwnProps { /** * Children content or render function */ children?: ReactNode | ((state: DialogCloseRenderProps) => ReactNode); } /** * Props for DialogClose * @remarks Fully accessible, headless component */ export type DialogCloseProps = PolymorphicProps<'button', T, DialogCloseOwnProps>;