@mantine/core/lib/components/Modal/Modal.d.ts

React components library focused on usability, accessibility and developer experience

import { Factory } from '../../core';
import { ModalBaseCloseButtonProps, ModalBaseOverlayProps } from '../ModalBase';
import { ModalBody, type ModalBodyProps } from './ModalBody';
import { ModalCloseButton, type ModalCloseButtonProps } from './ModalCloseButton';
import { ModalContent, type ModalContentProps } from './ModalContent';
import { ModalHeader, type ModalHeaderProps } from './ModalHeader';
import { ModalOverlay, type ModalOverlayProps } from './ModalOverlay';
import { ModalRoot, ModalRootCssVariables, ModalRootProps, ModalRootStylesNames } from './ModalRoot';
import { ModalStack, type ModalStackProps } from './ModalStack';
import { ModalTitle, type ModalTitleProps } from './ModalTitle';
export type ModalStylesNames = ModalRootStylesNames;
export type ModalCssVariables = ModalRootCssVariables;
export interface ModalProps extends ModalRootProps {
    __staticSelector?: string;
    /** Modal title */
    title?: React.ReactNode;
    /** If set, the overlay is rendered @default true */
    withOverlay?: boolean;
    /** Props passed down to the `Overlay` component, use to configure opacity, `background-color`, styles and other properties */
    overlayProps?: ModalBaseOverlayProps;
    /** Modal content */
    children?: React.ReactNode;
    /** If set, the close button is rendered @default true */
    withCloseButton?: boolean;
    /** Props passed down to the close button */
    closeButtonProps?: ModalBaseCloseButtonProps;
    /** Id of the modal in the `Modal.Stack` */
    stackId?: string;
}
export type ModalFactory = Factory<{
    props: ModalProps;
    ref: HTMLDivElement;
    stylesNames: ModalStylesNames;
    vars: ModalCssVariables;
    staticComponents: {
        Root: typeof ModalRoot;
        Overlay: typeof ModalOverlay;
        Content: typeof ModalContent;
        Body: typeof ModalBody;
        Header: typeof ModalHeader;
        Title: typeof ModalTitle;
        CloseButton: typeof ModalCloseButton;
        Stack: typeof ModalStack;
    };
}>;
export declare const Modal: import("../..").MantineComponent<{
    props: ModalProps;
    ref: HTMLDivElement;
    stylesNames: ModalStylesNames;
    vars: ModalCssVariables;
    staticComponents: {
        Root: typeof ModalRoot;
        Overlay: typeof ModalOverlay;
        Content: typeof ModalContent;
        Body: typeof ModalBody;
        Header: typeof ModalHeader;
        Title: typeof ModalTitle;
        CloseButton: typeof ModalCloseButton;
        Stack: typeof ModalStack;
    };
}>;
export declare namespace Modal {
    type Props = ModalProps;
    type StylesNames = ModalStylesNames;
    type CssVariables = ModalCssVariables;
    type Factory = ModalFactory;
    namespace Root {
        type Props = ModalRootProps;
    }
    namespace Body {
        type Props = ModalBodyProps;
    }
    namespace CloseButton {
        type Props = ModalCloseButtonProps;
    }
    namespace Content {
        type Props = ModalContentProps;
    }
    namespace Header {
        type Props = ModalHeaderProps;
    }
    namespace Overlay {
        type Props = ModalOverlayProps;
    }
    namespace Title {
        type Props = ModalTitleProps;
    }
    namespace Stack {
        type Props = ModalStackProps;
    }
}