import { default as React } from 'react';
import { KnownIcons } from '../Icon/Icon.component';
/**
A generic Modal component.

The Modal component can automatically create cancelling and confirming buttons with the desired labels and handlers.

For more complex use cases, more buttons, etc., an instance of `<ModalFooter>` with all custom content as children can be passed as prop `modalFooter` and will be rendered.

The Modal uses a boolean 'open' prop to determine whether it is open or not. Alternatively, the open state can be handled outside the component, e.g. in a global state. In this case the 'open' prop needs to be passed as true always, otherwise the Modal component will not render.

By default, the modal will close (i.e. set its `open` state to false) once the user cancels the Modal. When confirming, you will have to either set the `open` to false to close the modal, or use whatever global state mechanism you have to handle modals.

To make the modal less intrusive and effectively un-modal it, pass `closeOnBackdropClick`. This will close the modal when the user clicks the modal backdrop.
*/
export declare const Modal: React.FC<ModalProps>;
type ModalSize = "small" | "large";
type CancelEventHandler = (event: React.MouseEvent<EventTarget, MouseEvent> | KeyboardEvent) => void;
export interface ModalProps extends Omit<React.HTMLProps<HTMLDivElement>, "size"> {
    /** The aria-label of the modal. Use only if the modal does NOT have a `title` or `heading`.  */
    ariaLabel?: string;
    /** The title of the modal. This will be rendering as the heading of the modal, and the modal's `arial-labelledby` attribute will reference the title/heading element. If the modal does not have `title` or `heading`, use `ariaLabel` to provide an accessible name for the modal. */
    title?: string;
    /** Also the title of the modal, just for API flexibility. If both `title` and `heading` are passed, `title` will win. */
    heading?: string;
    /** The Modal size */
    size?: ModalSize;
    /** Pass a label to render a confirm button and a Cancel button */
    confirmButtonLabel?: string;
    /** Pass a label for the cancel button. Defaults to "Cancel" */
    cancelButtonLabel?: string;
    /** Pass an Icon name to show on the confirming action button */
    confirmButtonIcon?: KnownIcons | null;
    /** Pass an icon name to show on the cancelling button */
    cancelButtonIcon?: KnownIcons | null;
    /** Whether the modal will be open */
    open?: boolean;
    /** The children of the modal. These will be rendered as the modal content. To render custom buttons at the bottom, see `modalFooter` below.*/
    children?: React.ReactNode;
    /** Optional. Pass a `<ModalFooter />` component with custom content as required. Will default to using the `<ModalFooter/>` component internally. */
    modalFooter?: JSX.Element | null;
    /** Whether the modal can be closed using an "X"-Button at the top right. Defaults to true. */
    closeable?: boolean;
    /** Pass to remove default padding from the content area of the modal */
    unpad?: boolean;
    /** Custom className to add to the modal */
    className?: string;
    /** A handler to execute once the modal is confirmed by clicking the confrim button if exists. Note that we do not close the modal automatically. */
    onConfirm?: React.MouseEventHandler<EventTarget> | null;
    /** A handler to execute once the modal is cancelled or dismissed using the x-Close button,  Cancel-button or pressing ESC */
    onCancel?: CancelEventHandler;
    /** Whether the modal should be closed when the backdrop is clicked. Essentially 'un-modals' the modal. */
    closeOnBackdropClick?: boolean;
    /** Whether the modal can be closed by hitting the ESC key */
    closeOnEsc?: boolean;
    /** By default, the first element in the tab order of the Modal content will be focussed. To specify an element to be focussed when the modal opens, pass an element, DOM node, or selector string. */
    initialFocus?: HTMLElement | SVGElement | string;
}
export {};
//# sourceMappingURL=Modal.component.d.ts.map