import type { ComponentProps } from '@fluentui/react-utilities';
import type { ComponentState } from '@fluentui/react-utilities';
import type { EventHandler } from '@fluentui/react-utilities';
import type { ForwardRefComponent } from '@fluentui/react-utilities';
import type { JSXElement } from '@fluentui/react-utilities';
import * as React_2 from 'react';
import type { Slot } from '@fluentui/react-utilities';
import type { TriggerProps } from '@fluentui/react-utilities';

/**
 * The `Dialog` root component serves as an interface for all Dialog behaviors.
 * It provides context to compound sub-components: `DialogTrigger`, `DialogSurface`,
 * `DialogHeader`, `DialogTitle`, `DialogBody`, and `DialogActions`.
 *
 * This component uses the native HTML `<dialog>` element (via `DialogSurface`) for
 * built-in focus trapping, backdrop, and accessibility semantics.
 */
export declare const Dialog: React_2.FC<DialogProps>;

/**
 * `DialogActions` is a `<footer>` container for dialog action buttons (1–3 actions).
 */
export declare const DialogActions: ForwardRefComponent<DialogActionsProps>;

export declare type DialogActionsProps = ComponentProps<DialogActionsSlots>;

export declare type DialogActionsSlots = {
    root: Slot<'div'>;
};

export declare type DialogActionsState = ComponentState<DialogActionsSlots>;

/**
 * `DialogBody` is the scrollable content area of the dialog.
 * Place primary content — text, forms, lists — inside this component.
 */
export declare const DialogBody: ForwardRefComponent<DialogBodyProps>;

export declare type DialogBodyProps = ComponentProps<DialogBodySlots>;

export declare type DialogBodySlots = {
    root: Slot<'div'>;
};

export declare type DialogBodyState = ComponentState<DialogBodySlots>;

export declare type DialogContextValue = {
    open: boolean;
    modalType: DialogModalType;
    dialogTitleId: string;
    isNestedDialog: boolean;
    inertTrapFocus: boolean;
    unmountOnClose: boolean;
    requestOpenChange: (data: DialogOpenChangeData) => void;
};

export declare type DialogContextValues = {
    dialog: DialogContextValue;
    /**
     * dialogSurface context is provided by Dialog as false
     * to ensure components inside Dialog but outside DialogSurface consume this as false
     */
    dialogSurface: DialogSurfaceContextValue;
};

/**
 * `DialogHeader` is a `<header>` container for dialog title, subtitle, image,
 * and close button content.
 */
export declare const DialogHeader: ForwardRefComponent<DialogHeaderProps>;

export declare type DialogHeaderProps = ComponentProps<DialogHeaderSlots>;

export declare type DialogHeaderSlots = {
    root: Slot<'header'>;
};

export declare type DialogHeaderState = ComponentState<DialogHeaderSlots>;

export declare type DialogModalType = 'modal' | 'non-modal' | 'alert';

export declare type DialogOpenChangeData = {
    type: 'escapeKeyDown';
    open: boolean;
    event: React_2.KeyboardEvent<HTMLDialogElement>;
} | {
    type: 'backdropClick';
    open: boolean;
    event: React_2.MouseEvent<HTMLDialogElement>;
} | {
    type: 'surfaceToggle';
    open: boolean;
    event: Event;
} | {
    type: 'triggerClick';
    open: boolean;
    event: React_2.MouseEvent;
};

export declare type DialogOpenChangeEvent = DialogOpenChangeData['event'];

/**
 * Callback fired when the component changes value from open state.
 *
 * @param event - a React's Synthetic event
 * @param data - A data object with relevant information,
 * such as open value and type of interaction that created the event
 */
export declare type DialogOpenChangeEventHandler = EventHandler<DialogOpenChangeData>;

export declare type DialogProps = {
    /**
     * Dialog variations.
     *
     * `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with.
     * The tab sequence is kept within the dialog. This is the default type of the component.
     *
     * `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out
     * and users can interact with the rest of the page.
     *
     * `alert`: is a special type of modal dialog that interrupts the user's workflow
     * to communicate an important message or ask for a decision.
     *
     * @default modal
     */
    modalType?: DialogModalType;
    /**
     * Controls the open state of the dialog.
     * @default false
     */
    open?: boolean;
    /**
     * Default value for the uncontrolled open state of the dialog.
     * @default false
     */
    defaultOpen?: boolean;
    /**
     * Callback fired when the component changes value from open state.
     */
    onOpenChange?: EventHandler<DialogOpenChangeData>;
    /**
     * Dialog children in the expected order:
     * - `DialogTrigger` + `DialogSurface`, or
     * - `DialogSurface` only when opening/closing from outside or controlling state.
     */
    children: [JSXElement, JSXElement] | JSXElement;
    /**
     * Enables standard behavior according to the HTML dialog spec
     * where the focus trap involves setting outside elements inert.
     * Native `<dialog showModal()>` always uses inert focus trapping,
     * so this prop is accepted for API parity but does not change behavior.
     *
     * @default false
     */
    inertTrapFocus?: boolean;
    /**
     * Decides whether the dialog should be removed from the DOM when it is closed.
     *
     * @default true
     */
    unmountOnClose?: boolean;
};

export declare type DialogState = {
    open: boolean;
    modalType: DialogModalType;
    dialogTitleId: string;
    isNestedDialog: boolean;
    inertTrapFocus: boolean;
    unmountOnClose: boolean;
    trigger: React_2.ReactNode;
    content: React_2.ReactNode;
    requestOpenChange: (data: DialogOpenChangeData) => void;
};

/**
 * `DialogSurface` renders the native HTML `<dialog>` element.
 *
 * Place it as a direct child of `Dialog` (alongside an optional `DialogTrigger`).
 * It manages open/close via `showModal()` / `showPopover()` / `close()` imperatively,
 * keeping the native element in sync with the controlled `open` prop.
 *
 * The native `::backdrop` pseudo-element provides the modal backdrop.
 * Focus is trapped automatically when the dialog is opened as modal.
 */
export declare const DialogSurface: ForwardRefComponent<DialogSurfaceProps>;

export declare type DialogSurfaceContextValue = boolean;

/**
 * DialogSurface Props
 */
export declare type DialogSurfaceProps = ComponentProps<DialogSurfaceSlots>;

export declare type DialogSurfaceSlots = {
    /**
     * The native HTML `<dialog>` element.
     * Opened as modal via `showModal()` or non-modal via `showPopover()`.
     * The `::backdrop` CSS pseudo-element provides the native backdrop for modal dialogs.
     */
    root: Slot<'dialog'>;
};

/**
 * State used in rendering DialogSurface
 */
export declare type DialogSurfaceState = ComponentState<DialogSurfaceSlots> & {
    /**
     * Whether the dialog is open. Mirrors DialogContext's `open` value.
     */
    open: boolean;
    /**
     * Whether the `<dialog>` element should be removed from the DOM when closed.
     * Mirrors DialogContext's `unmountOnClose` value.
     */
    unmountOnClose: boolean;
    /**
     * Modality of the dialog. Mirrors DialogContext's `modalType`.
     * - `modal` / `alert`: opened via `showModal()`; rendered into the browser top layer.
     * - `non-modal`: opened via `showPopover()` with `popover="manual"`, entering
     *   the browser top layer while keeping open/close fully React-controlled.
     */
    modalType: DialogModalType;
    /**
     * Whether the `<dialog>` element should be present in the DOM this render.
     *
     * Equals `open || !unmountOnClose`, except when `open` flips from true to false with
     * `unmountOnClose: true` — then it stays true for one extra render so the layout
     * effect can call `dialog.close()` on the still-connected element, which lets the
     * browser run its native close-the-dialog focus restoration.
     */
    shouldRender: boolean;
};

/**
 * `DialogTitle` renders a heading element whose `id` is automatically wired to
 * `aria-labelledby` on `DialogSurface`, providing an accessible name for the dialog.
 *
 * Defaults to `<h2>`. Override the element via the `root` slot:
 * `<DialogTitle root="h1" />`
 */
export declare const DialogTitle: ForwardRefComponent<DialogTitleProps>;

export declare type DialogTitleProps = ComponentProps<DialogTitleSlots>;

export declare type DialogTitleSlots = {
    /**
     * The heading element. Defaults to `<h2>`.
     * Its `id` is set to match the `aria-labelledby` on `DialogSurface`.
     */
    root: Slot<'h2'>;
};

export declare type DialogTitleState = ComponentState<DialogTitleSlots>;

/**
 * `DialogTrigger` clones its single child element and attaches click handling
 * to open or close the parent `Dialog`.
 *
 * When placed outside `DialogSurface`, it defaults to `action="open"`.
 * When placed inside `DialogSurface`, it defaults to `action="close"`.
 */
export declare const DialogTrigger: React_2.FC<DialogTriggerProps>;

export declare type DialogTriggerAction = 'open' | 'close';

export declare type DialogTriggerProps = TriggerProps & {
    /**
     * Explicitly declare if the trigger is responsible for opening or closing the dialog.
     *
     * If `DialogTrigger` is outside `DialogSurface` it defaults to `'open'`.
     * If `DialogTrigger` is inside `DialogSurface` it defaults to `'close'`.
     */
    action?: DialogTriggerAction;
};

export declare type DialogTriggerState = {
    children: React_2.ReactElement | null;
};

/**
 * Render the final JSX of Dialog.
 * Dialog renders no DOM element itself — it provides context for compound sub-components.
 */
export declare const renderDialog: (state: DialogState, contextValues: DialogContextValues) => JSXElement;

export declare const renderDialogActions: (state: DialogActionsState) => JSXElement;

export declare const renderDialogBody: (state: DialogBodyState) => JSXElement;

export declare const renderDialogHeader: (state: DialogHeaderState) => JSXElement;

/**
 * Render the final JSX of DialogSurface.
 * Returns null when the dialog is closed and unmountOnClose is true.
 * Provides DialogSurfaceContext=true so DialogTrigger inside defaults to action="close".
 *
 * DialogSurface is always rendered inline. For `modal`/`alert`, `<dialog showModal()>`
 * enters the browser top layer. For `non-modal`, the surface uses the native
 * popover API (`popover="manual"` + `showPopover()`), which promotes it to the
 * top layer without enabling native light-dismiss.
 */
export declare const renderDialogSurface: (state: DialogSurfaceState) => JSXElement | null;

export declare const renderDialogTitle: (state: DialogTitleState) => JSXElement;

/**
 * Create the state required to render Dialog.
 *
 * The returned state can be modified with hooks before being passed to renderDialog.
 *
 * @param props - props from this instance of Dialog
 */
export declare const useDialog: (props: DialogProps) => DialogState;

/**
 * Create the state required to render DialogActions.
 *
 * @param props - props from this instance of DialogActions
 * @param ref - reference to root HTMLDivElement of DialogActions
 */
export declare const useDialogActions: (props: DialogActionsProps, ref: React_2.Ref<HTMLDivElement>) => DialogActionsState;

/**
 * Create the state required to render DialogBody.
 *
 * @param props - props from this instance of DialogBody
 * @param ref - reference to root HTMLDivElement of DialogBody
 */
export declare const useDialogBody: (props: DialogBodyProps, ref: React_2.Ref<HTMLDivElement>) => DialogBodyState;

export declare const useDialogContext: () => DialogContextValue;

export declare const useDialogContextValues: (state: DialogState) => DialogContextValues;

/**
 * Create the state required to render DialogHeader.
 *
 * @param props - props from this instance of DialogHeader
 * @param ref - reference to root HTMLElement of DialogHeader
 */
export declare const useDialogHeader: (props: DialogHeaderProps, ref: React_2.Ref<HTMLElement>) => DialogHeaderState;

/**
 * Create the state required to render DialogSurface.
 * Uses native `<dialog>` behavior:
 * - modal/alert => `showModal()`
 * - non-modal => `showPopover()` (fallback to `show()`)
 * - close => `close()`/`hidePopover()`
 *
 * @param props - props from this instance of DialogSurface
 * @param ref - reference to root HTMLDialogElement of DialogSurface
 */
export declare const useDialogSurface: (props: DialogSurfaceProps, ref: React_2.Ref<HTMLDialogElement>) => DialogSurfaceState;

export declare const useDialogSurfaceContext: () => DialogSurfaceContextValue;

/**
 * Create the state required to render DialogTitle.
 *
 * Sets `id` to the dialog's generated title id so that `DialogSurface`
 * can reference it via `aria-labelledby` for accessible naming.
 *
 * @param props - props from this instance of DialogTitle
 * @param ref - reference to root HTMLHeadingElement of DialogTitle
 */
export declare const useDialogTitle: (props: DialogTitleProps, ref: React_2.Ref<HTMLHeadingElement>) => DialogTitleState;

/**
 * Create the state required to render DialogTrigger.
 * Clones the single child component and adds click handling to open or close the dialog.
 *
 * @param props - props from this instance of DialogTrigger
 */
export declare const useDialogTrigger: (props: DialogTriggerProps) => DialogTriggerState;

export { }