@base-ui-components/react/cjs/dialog/popup/useDialogPopup.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 { type FloatingRootContext, type FloatingContext } from '@floating-ui/react';
import { type InteractionType } from '../../utils/useEnhancedClickHandler.js';
import { GenericHTMLProps } from '../../utils/types.js';
import { type OpenChangeReason } from '../../utils/translateOpenChangeReason.js';
export declare function useDialogPopup(parameters: useDialogPopup.Parameters): useDialogPopup.ReturnValue;
export declare namespace useDialogPopup {
    interface Parameters {
        /**
         * The id of the dialog element.
         */
        id?: string;
        /**
         * The ref to the dialog element.
         */
        ref: React.Ref<HTMLElement>;
        /**
         * Whether the dialog should prevent outside clicks and lock page scroll when open.
         */
        modal: boolean;
        /**
         * Whether the dialog is currently open.
         */
        open: boolean;
        openMethod: InteractionType | null;
        /**
         * Event handler called when the dialog is opened or closed.
         */
        setOpen: (open: boolean, event: Event | undefined, reason: OpenChangeReason | undefined) => void;
        /**
         * The id of the title element associated with the dialog.
         */
        titleElementId: string | undefined;
        /**
         * The id of the description element associated with the dialog.
         */
        descriptionElementId: string | undefined;
        /**
         * Callback to set the id of the popup element.
         */
        setPopupElementId: (id: string | undefined) => void;
        /**
         * Determines the element to focus when the dialog is opened.
         * By default, the first focusable element is focused.
         */
        initialFocus?: React.RefObject<HTMLElement | null> | ((interactionType: InteractionType) => React.RefObject<HTMLElement | null>);
        /**
         * The Floating UI root context.
         */
        floatingRootContext: FloatingRootContext;
        /**
         * Determines if the dialog should be mounted.
         */
        mounted: boolean;
        /**
         * The resolver for the popup element props.
         */
        getPopupProps: () => GenericHTMLProps;
        /**
         * Callback to register the popup element.
         */
        setPopupElement: React.Dispatch<React.SetStateAction<HTMLElement | null>>;
    }
    interface ReturnValue {
        /**
         * Floating UI context for the dialog's FloatingFocusManager.
         */
        floatingContext: FloatingContext;
        /**
         * Resolver for the root element props.
         */
        getRootProps: (externalProps: React.ComponentPropsWithRef<'div'>) => React.ComponentPropsWithRef<'div'>;
        resolvedInitialFocus: React.RefObject<HTMLElement | null> | number;
    }
}