@yamada-ui/modal/dist/modal.d.ts

Yamada UI modal component

import * as _yamada_ui_motion from '@yamada-ui/motion';
import { MotionTransitionProps } from '@yamada-ui/motion';
import { ThemeProps, CSSUIProps, Token, HTMLUIProps } from '@yamada-ui/core';
import { FocusLockProps } from '@yamada-ui/focus-lock';
import { PortalProps } from '@yamada-ui/portal';
import { ModalContentProps } from './modal-content.js';
import 'react';

interface ModalOptions extends Pick<FocusLockProps, "autoFocus" | "finalFocusRef" | "initialFocusRef" | "lockFocusAcrossFrames" | "restoreFocus"> {
    /**
     * Handle zoom or pinch gestures on iOS devices when scroll locking is enabled.
     *
     * @default false.
     */
    allowPinchZoom?: boolean;
    /**
     * The animation of the tooltip.
     *
     * @default 'scale'
     */
    animation?: "bottom" | "left" | "none" | "right" | "scale" | "top";
    /**
     * If `true`, scrolling will be disabled on the `body` when the modal opens.
     *
     * @default true
     */
    blockScrollOnMount?: boolean;
    /**
     * If `true`, the modal will close when the `Esc` key is pressed.
     *
     * @default true
     */
    closeOnEsc?: boolean;
    /**
     * If `true`, the modal will close when the overlay is clicked.
     *
     * @default true
     */
    closeOnOverlay?: boolean;
    /**
     * The animation duration.
     */
    duration?: MotionTransitionProps["duration"];
    /**
     * If `true`, the open will be opened.
     *
     * @deprecated Use `open` instead.
     */
    isOpen?: boolean;
    /**
     * If `true`, the open will be opened.
     */
    open?: boolean;
    /**
     * The CSS `padding` property.
     */
    outside?: CSSUIProps["p"];
    /**
     * The placement of the modal.
     *
     * @default 'center'
     */
    placement?: Token<"bottom" | "bottom-left" | "bottom-right" | "center" | "left" | "right" | "top" | "top-left" | "top-right">;
    /**
     * Where scroll behavior should originate.
     *
     * - `inside`: scroll only occurs within the `ModalBody`.
     * - `outside`: the entire `ModalContent` will scroll within the viewport.
     *
     * @default 'inside'
     */
    scrollBehavior?: "inside" | "outside";
    /**
     * If `true`, display the modal close button.
     *
     * @default true
     */
    withCloseButton?: boolean;
    /**
     * If `true`, display the modal overlay.
     *
     * @default true
     */
    withOverlay?: boolean;
    /**
     * Props for modal container element.
     */
    containerProps?: HTMLUIProps;
    /**
     * Props to be forwarded to the portal component.
     */
    portalProps?: Omit<PortalProps, "children">;
    /**
     * Callback invoked to close the modal.
     */
    onClose?: () => void;
    /**
     * Callback function to run side effects after the modal has closed.
     */
    onCloseComplete?: () => void;
    /**
     * Callback fired when the escape key is pressed and focus is within modal.
     */
    onEsc?(): void;
    /**
     * Callback fired when the overlay is clicked.
     */
    onOverlayClick?: () => void;
}
interface ModalProps extends ModalContentProps, ThemeProps<"Modal">, ModalOptions {
}
/**
 * `Modal` is a component that is displayed over the main content to focus the user's attention solely on the information.
 *
 * @see Docs https://yamada-ui.com/components/overlay/modal
 */
declare const Modal: _yamada_ui_motion.MotionComponent<"section", ModalProps>;

export { Modal, type ModalOptions, type ModalProps };