import { ComponentPropsWithoutRef } from 'react'; import { OpenCloseTransitionStateEffects } from '../../internal/hooks'; import { FocusableElement, DisableCloseOnEscapeOrClickProps, Size } from '../../types'; import { DrillDownContextProps } from '../DrillDown/internal/DrillDownContext'; /** * Props for the Dialog component * @extends ComponentPropsWithoutRef<"dialog"> * @extends DialogTransitionStateEffects * @extends DisableCloseOnEscapeOrClickProps */ export type DialogProps = ComponentPropsWithoutRef<"dialog"> & OpenCloseTransitionStateEffects & DisableCloseOnEscapeOrClickProps & { /** * @default false */ fullScreen?: boolean; /** * @default "medium" */ size?: Extract; /** * @default false */ open?: boolean; onClose?: () => void; /** * Callback when clicking outside the dialog */ onClickOutside?: (e: globalThis.MouseEvent) => void; /** * Enables scroll chaining * @link https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining */ enableScrollChaining?: boolean; /** * Given an array of focusable elements, return the initial focus target. * @param focusables - The focusable elements to pick from * @returns The initial focus target */ initialFocusResolver?: (focusables: FocusableElement[]) => FocusableElement; /** * Sets the default DrillDown index when used in an uncontrolled way */ defaultDrillDownIndex?: DrillDownContextProps["index"]; /** * Callback to pass context to useDrillDown hook */ onDrillDownContextChange?: (context: DrillDownContextProps) => void; }; /** * Dialog component for creating modal dialogs and overlays. * * Features: * - Modal dialog with backdrop overlay * - Controlled and uncontrolled open state * - Smooth open/close animations * - Keyboard navigation and focus management * - Escape key and click outside to close * - Multiple size variants (medium, large, fullscreen) * - Scroll chaining support * - Toast integration for notifications * - Compound component pattern with Header, Footer, Content, and CancelButton sub-components * - Automatic tracking ID generation for analytics * * @example * setIsOpen(false)}> * Confirm Action * Are you sure you want to proceed? * * Cancel * * * */ export declare const Dialog: import('react').ForwardRefExoticComponent, HTMLDialogElement>, "ref"> & OpenCloseTransitionStateEffects & DisableCloseOnEscapeOrClickProps & { /** * @default false */ fullScreen?: boolean; /** * @default "medium" */ size?: Extract; /** * @default false */ open?: boolean; onClose?: () => void; /** * Callback when clicking outside the dialog */ onClickOutside?: (e: globalThis.MouseEvent) => void; /** * Enables scroll chaining * @link https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining */ enableScrollChaining?: boolean; /** * Given an array of focusable elements, return the initial focus target. * @param focusables - The focusable elements to pick from * @returns The initial focus target */ initialFocusResolver?: (focusables: FocusableElement[]) => FocusableElement; /** * Sets the default DrillDown index when used in an uncontrolled way */ defaultDrillDownIndex?: DrillDownContextProps["index"]; /** * Callback to pass context to useDrillDown hook */ onDrillDownContextChange?: (context: DrillDownContextProps) => void; } & import('react').RefAttributes> & { /** * DialogHeader component for the header section of a Dialog. * * Features: * - Displays dialog title with headline typography * - Includes close button with proper accessibility * - Sticky positioning for long content * - Consistent spacing and styling * - Automatic focus management * - Automatic tracking ID generation for analytics * * @example * Confirm Delete */ Header: import('react').ForwardRefExoticComponent, HTMLElement>, "ref"> & import('../..').DataTrackingId & import('react').RefAttributes>; /** * DialogFooter component for the footer section of a Dialog. * * Features: * - Container for dialog action buttons * - Optional sticky positioning for long content * - Consistent spacing and alignment * - Right-aligned button layout by default * - Flexible content area for custom layouts * * @example * * Cancel * * */ Footer: import('react').ForwardRefExoticComponent, HTMLElement>, "ref"> & { sticky?: boolean; } & import('react').RefAttributes>; /** * DialogContent component for the main content area of a Dialog. * * Features: * - Main content container for dialog body * - Flexible height with overflow handling * - Consistent padding and spacing * - Responsive design * - Proper content scrolling for long content * * @example * *

This is the main content of the dialog.

*
*/ Content: import('react').ForwardRefExoticComponent, HTMLDivElement>, "ref"> & { sticky?: boolean; } & import('react').RefAttributes>; /** * DialogCancelButton component for cancel/close actions in a Dialog. * * Features: * - Button that automatically closes the dialog when clicked * - Extends all Button component props and functionality * - Proper accessibility with close dialog semantics * - Automatic focus management * - Consistent styling with other dialog elements * - Automatic tracking ID generation for analytics * * @example * Cancel */ CancelButton: import('react').ForwardRefExoticComponent>; }; export declare const DialogElement: import('react').ForwardRefExoticComponent, HTMLDialogElement>, "ref"> & OpenCloseTransitionStateEffects & DisableCloseOnEscapeOrClickProps & { /** * @default false */ fullScreen?: boolean; /** * @default "medium" */ size?: Extract; /** * @default false */ open?: boolean; onClose?: () => void; /** * Callback when clicking outside the dialog */ onClickOutside?: (e: globalThis.MouseEvent) => void; /** * Enables scroll chaining * @link https://developer.mozilla.org/en-US/docs/Glossary/Scroll_chaining */ enableScrollChaining?: boolean; /** * Given an array of focusable elements, return the initial focus target. * @param focusables - The focusable elements to pick from * @returns The initial focus target */ initialFocusResolver?: (focusables: FocusableElement[]) => FocusableElement; /** * Sets the default DrillDown index when used in an uncontrolled way */ defaultDrillDownIndex?: DrillDownContextProps["index"]; /** * Callback to pass context to useDrillDown hook */ onDrillDownContextChange?: (context: DrillDownContextProps) => void; } & import('react').RefAttributes> & { /** * DialogHeader component for the header section of a Dialog. * * Features: * - Displays dialog title with headline typography * - Includes close button with proper accessibility * - Sticky positioning for long content * - Consistent spacing and styling * - Automatic focus management * - Automatic tracking ID generation for analytics * * @example * Confirm Delete */ Header: import('react').ForwardRefExoticComponent, HTMLElement>, "ref"> & import('../..').DataTrackingId & import('react').RefAttributes>; /** * DialogFooter component for the footer section of a Dialog. * * Features: * - Container for dialog action buttons * - Optional sticky positioning for long content * - Consistent spacing and alignment * - Right-aligned button layout by default * - Flexible content area for custom layouts * * @example * * Cancel * * */ Footer: import('react').ForwardRefExoticComponent, HTMLElement>, "ref"> & { sticky?: boolean; } & import('react').RefAttributes>; /** * DialogContent component for the main content area of a Dialog. * * Features: * - Main content container for dialog body * - Flexible height with overflow handling * - Consistent padding and spacing * - Responsive design * - Proper content scrolling for long content * * @example * *

This is the main content of the dialog.

*
*/ Content: import('react').ForwardRefExoticComponent, HTMLDivElement>, "ref"> & { sticky?: boolean; } & import('react').RefAttributes>; /** * DialogCancelButton component for cancel/close actions in a Dialog. * * Features: * - Button that automatically closes the dialog when clicked * - Extends all Button component props and functionality * - Proper accessibility with close dialog semantics * - Automatic focus management * - Consistent styling with other dialog elements * - Automatic tracking ID generation for analytics * * @example * Cancel */ CancelButton: import('react').ForwardRefExoticComponent>; };