@eccenca/gui-elements/dist/types/components/Dialog/Modal.d.ts

GUI elements based on other libraries, usable in React application, written in Typescript.

import React from "react";
import { Overlay2Props as BlueprintOverlayProps } from "@blueprintjs/core";
import { TestableComponent } from "../interfaces";
export interface ModalProps extends TestableComponent, BlueprintOverlayProps {
    children: React.ReactNode | React.ReactNode[];
    /**
     * A space-delimited list of class names to pass along to the BlueprintJS `Overlay` element that is used to create the modal.
     */
    overlayClassName?: string;
    /**
     * Size of the modal.
     */
    size?: ModalSize;
    /**
     * Prevents that a backdrop area is displayed behind the modal elements.
     */
    preventBackdrop?: boolean;
    /**
     * Optional props for the wrapper div element inside the modal overlay.
     */
    wrapperDivProps?: React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
    /**
     * Make the modal focusable, e.g. when clicking somewhere on it.
     * This is needed, e.g. when capturing key (down, up) events that should bubble to the modal's parent elements.
     */
    modalFocusable?: boolean;
    /**
     * Works only for modals inside portals (`usePortal={true}`).
     * When set to `true` then the `z-index` of the modal's portal element is recalculated, so that the modal is always shown on top of all other visible elements.
     * Use this with care!
     * Usually the normal opening sequence is enough to show the currently most important modal on top.
     * If this option is used inflationary then this could harm the visibility of other overlays.
     */
    forceTopPosition?: boolean;
    /**
     * Modal ID that should be globally unique. If a ModalContext is provided this can be used to track opening/closing of this modal.
     */
    modalId?: string;
    /**
     * Prevents that pan and zooming actions of an existing react-flow instance are triggered while this Modal is open.
     */
    preventReactFlowEvents?: boolean;
}
export type ModalSize = "tiny" | "small" | "regular" | "large" | "xlarge" | "fullscreen";
/**
 * Displays contents on top of other elements, used to create dialogs.
 * For most situations the usage of `SimpleDialog` and `AlertDialog` should be sufficient.
 * Otherwise this element can be used to create own modal elements and edge cases for modal dialogs.
 * Then it is recommended to use the `Card` element inside.
 */
export declare const Modal: ({ children, className, overlayClassName, size, canOutsideClickClose, canEscapeKeyClose, preventBackdrop, wrapperDivProps, modalFocusable, usePortal, forceTopPosition, onOpening, "data-test-id": dataTestId, "data-testid": dataTestid, modalId, preventReactFlowEvents, ...otherProps }: ModalProps) => React.JSX.Element;
export default Modal;