1 | import React from 'react';
|
2 | export interface ModalProps {
|
3 | /**
|
4 | * Control if the modal is open or not.
|
5 | */
|
6 | open: boolean;
|
7 | /**
|
8 | * Should the dialog be centered.
|
9 | *
|
10 | * Default to false.
|
11 | */
|
12 | center?: boolean;
|
13 | /**
|
14 | * Is the modal closable when user press esc key.
|
15 | *
|
16 | * Default to true.
|
17 | */
|
18 | closeOnEsc?: boolean;
|
19 | /**
|
20 | * Is the modal closable when user click on overlay.
|
21 | *
|
22 | * Default to true.
|
23 | */
|
24 | closeOnOverlayClick?: boolean;
|
25 | /**
|
26 | * Whether to block scrolling when dialog is open.
|
27 | *
|
28 | * Default to true.
|
29 | */
|
30 | blockScroll?: boolean;
|
31 | /**
|
32 | * Show the close icon.
|
33 | *
|
34 | * Default to true.
|
35 | */
|
36 | showCloseIcon?: boolean;
|
37 | /**
|
38 | * id attribute for the close icon button.
|
39 | */
|
40 | closeIconId?: string;
|
41 | /**
|
42 | * Custom icon to render (svg, img, etc...).
|
43 | */
|
44 | closeIcon?: React.ReactNode;
|
45 | /**
|
46 | * When the modal is open, trap focus within it.
|
47 | *
|
48 | * Default to true.
|
49 | */
|
50 | focusTrapped?: boolean;
|
51 | /**
|
52 | * Element to focus when focus trap is used.
|
53 | *
|
54 | * Default to undefined.
|
55 | */
|
56 | initialFocusRef?: React.RefObject<HTMLElement>;
|
57 | /**
|
58 | * You can specify a container prop which should be of type `Element`.
|
59 | * The portal will be rendered inside that element.
|
60 | * The default behavior will create a div node and render it at the at the end of document.body.
|
61 | */
|
62 | container?: Element | null;
|
63 | /**
|
64 | * An object containing classNames to style the modal.
|
65 | */
|
66 | classNames?: {
|
67 | root?: string;
|
68 | overlay?: string;
|
69 | overlayAnimationIn?: string;
|
70 | overlayAnimationOut?: string;
|
71 | modalContainer?: string;
|
72 | modal?: string;
|
73 | modalAnimationIn?: string;
|
74 | modalAnimationOut?: string;
|
75 | closeButton?: string;
|
76 | closeIcon?: string;
|
77 | };
|
78 | /**
|
79 | * An object containing the styles objects to style the modal.
|
80 | */
|
81 | styles?: {
|
82 | root?: React.CSSProperties;
|
83 | overlay?: React.CSSProperties;
|
84 | modalContainer?: React.CSSProperties;
|
85 | modal?: React.CSSProperties;
|
86 | closeButton?: React.CSSProperties;
|
87 | closeIcon?: React.CSSProperties;
|
88 | };
|
89 | /**
|
90 | * Animation duration in milliseconds.
|
91 | *
|
92 | * Default to 300.
|
93 | */
|
94 | animationDuration?: number;
|
95 | /**
|
96 | * ARIA role for modal
|
97 | *
|
98 | * Default to 'dialog'.
|
99 | */
|
100 | role?: string;
|
101 | /**
|
102 | * ARIA label for modal
|
103 | */
|
104 | ariaLabelledby?: string;
|
105 | /**
|
106 | * ARIA description for modal
|
107 | */
|
108 | ariaDescribedby?: string;
|
109 | /**
|
110 | * id attribute for modal
|
111 | */
|
112 | modalId?: string;
|
113 | /**
|
114 | * Callback fired when the Modal is requested to be closed by a click on the overlay or when user press esc key.
|
115 | */
|
116 | onClose: () => void;
|
117 | /**
|
118 | * Callback fired when the escape key is pressed.
|
119 | */
|
120 | onEscKeyDown?: (event: KeyboardEvent) => void;
|
121 | /**
|
122 | * Callback fired when the overlay is clicked.
|
123 | */
|
124 | onOverlayClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
|
125 | /**
|
126 | * Callback fired when the Modal has exited and the animation is finished.
|
127 | */
|
128 | onAnimationEnd?: () => void;
|
129 | children?: React.ReactNode;
|
130 | }
|
131 | export declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDivElement>>;
|
132 | export default Modal;
|