@base-ui-components/react/cjs/dialog/root/useDialogRoot.d.ts

Base UI is a library of headless ('unstyled') React components and low-level hooks. You gain complete control over your app's CSS and accessibility features.

import * as React from 'react';
import { FloatingRootContext } from '@floating-ui/react';
import { type TransitionStatus } from '../../utils/useTransitionStatus.js';
import { type InteractionType } from '../../utils/useEnhancedClickHandler.js';
import type { RequiredExcept, GenericHTMLProps } from '../../utils/types.js';
import { type OpenChangeReason } from '../../utils/translateOpenChangeReason.js';
export declare function useDialogRoot(parameters: useDialogRoot.Parameters): useDialogRoot.ReturnValue;
export interface CommonParameters {
    /**
     * Whether the dialog is currently open.
     */
    open?: boolean;
    /**
     * Whether the dialog is initially open.
     *
     * To render a controlled dialog, use the `open` prop instead.
     * @default false
     */
    defaultOpen?: boolean;
    /**
     * Whether the dialog should prevent outside clicks and lock page scroll when open.
     * @default true
     */
    modal?: boolean;
    /**
     * Event handler called when the dialog is opened or closed.
     */
    onOpenChange?: (open: boolean, event: Event | undefined, reason: OpenChangeReason | undefined) => void;
    /**
     * Determines whether the dialog should close on outside clicks.
     * @default true
     */
    dismissible?: boolean;
}
export declare namespace useDialogRoot {
    interface Parameters extends RequiredExcept<CommonParameters, 'open' | 'onOpenChange'> {
        /**
         * Callback to invoke when a nested dialog is opened.
         */
        onNestedDialogOpen?: (ownChildrenCount: number) => void;
        /**
         * Callback to invoke when a nested dialog is closed.
         */
        onNestedDialogClose?: () => void;
    }
    interface ReturnValue {
        /**
         * The id of the description element associated with the dialog.
         */
        descriptionElementId: string | undefined;
        /**
         * Whether the dialog should prevent outside clicks and lock page scroll when open.
         */
        modal: boolean;
        /**
         * Number of nested dialogs that are currently open.
         */
        nestedOpenDialogCount: number;
        /**
         * Callback to invoke when a nested dialog is closed.
         */
        onNestedDialogClose?: () => void;
        /**
         * Callback to invoke when a nested dialog is opened.
         */
        onNestedDialogOpen?: (ownChildrenCount: number) => void;
        /**
         * Event handler called when the dialog is opened or closed.
         */
        setOpen: (open: boolean, event: Event | undefined, reason: OpenChangeReason | undefined) => void;
        /**
         * Whether the dialog is currently open.
         */
        open: boolean;
        /**
         * Determines what triggered the dialog to open.
         */
        openMethod: InteractionType | null;
        /**
         * The id of the popup element.
         */
        popupElementId: string | undefined;
        /**
         * Callback to set the id of the description element associated with the dialog.
         */
        setDescriptionElementId: (elementId: string | undefined) => void;
        /**
         * Callback to set the id of the popup element.
         */
        setPopupElementId: (elementId: string | undefined) => void;
        /**
         * Callback to set the id of the title element.
         */
        setTitleElementId: (elementId: string | undefined) => void;
        /**
         * The id of the title element associated with the dialog.
         */
        titleElementId: string | undefined;
        /**
         * Determines if the dialog should be mounted.
         */
        mounted: boolean;
        /**
         * The transition status of the dialog.
         */
        transitionStatus: TransitionStatus;
        /**
         * Resolver for the Trigger element's props.
         */
        getTriggerProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
        /**
         * Resolver for the Popup element's props.
         */
        getPopupProps: (externalProps?: GenericHTMLProps) => GenericHTMLProps;
        /**
         * Callback to register the Trigger element DOM node.
         */
        setTriggerElement: React.Dispatch<React.SetStateAction<Element | null>>;
        /**
         * Callback to register the Popup element DOM node.
         */
        setPopupElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
        /**
         * The ref to the Popup element.
         */
        popupRef: React.RefObject<HTMLElement | null>;
        /**
         * The Floating UI root context.
         */
        floatingRootContext: FloatingRootContext;
    }
}