1 | import * as React from 'react';
|
2 | import { OverridableComponent, OverridableTypeMap, Simplify } from '@mui/types';
|
3 | import { PortalProps } from '../Portal';
|
4 | import { PolymorphicProps, SlotComponentProps } from '../utils';
|
5 | export interface ModalRootSlotPropsOverrides {
|
6 | }
|
7 | export interface ModalBackdropSlotPropsOverrides {
|
8 | }
|
9 | export interface ModalOwnProps {
|
10 | /**
|
11 | * A single child content element.
|
12 | */
|
13 | children: React.ReactElement;
|
14 | /**
|
15 | * When set to true the Modal waits until a nested Transition is completed before closing.
|
16 | * @default false
|
17 | */
|
18 | closeAfterTransition?: boolean;
|
19 | /**
|
20 | * An HTML element or function that returns one.
|
21 | * The `container` will have the portal children appended to it.
|
22 | *
|
23 | * By default, it uses the body of the top-level document object,
|
24 | * so it's simply `document.body` most of the time.
|
25 | */
|
26 | container?: PortalProps['container'];
|
27 | /**
|
28 | * If `true`, the modal will not automatically shift focus to itself when it opens, and
|
29 | * replace it to the last focused element when it closes.
|
30 | * This also works correctly with any modal children that have the `disableAutoFocus` prop.
|
31 | *
|
32 | * Generally this should never be set to `true` as it makes the modal less
|
33 | * accessible to assistive technologies, like screen readers.
|
34 | * @default false
|
35 | */
|
36 | disableAutoFocus?: boolean;
|
37 | /**
|
38 | * If `true`, the modal will not prevent focus from leaving the modal while open.
|
39 | *
|
40 | * Generally this should never be set to `true` as it makes the modal less
|
41 | * accessible to assistive technologies, like screen readers.
|
42 | * @default false
|
43 | */
|
44 | disableEnforceFocus?: boolean;
|
45 | /**
|
46 | * If `true`, hitting escape will not fire the `onClose` callback.
|
47 | * @default false
|
48 | */
|
49 | disableEscapeKeyDown?: boolean;
|
50 | /**
|
51 | * The `children` will be under the DOM hierarchy of the parent component.
|
52 | * @default false
|
53 | */
|
54 | disablePortal?: PortalProps['disablePortal'];
|
55 | /**
|
56 | * If `true`, the modal will not restore focus to previously focused element once
|
57 | * modal is hidden or unmounted.
|
58 | * @default false
|
59 | */
|
60 | disableRestoreFocus?: boolean;
|
61 | /**
|
62 | * Disable the scroll lock behavior.
|
63 | * @default false
|
64 | */
|
65 | disableScrollLock?: boolean;
|
66 | /**
|
67 | * If `true`, the backdrop is not rendered.
|
68 | * @default false
|
69 | */
|
70 | hideBackdrop?: boolean;
|
71 | /**
|
72 | * Always keep the children in the DOM.
|
73 | * This prop can be useful in SEO situation or
|
74 | * when you want to maximize the responsiveness of the Modal.
|
75 | * @default false
|
76 | */
|
77 | keepMounted?: boolean;
|
78 | /**
|
79 | * Callback fired when the backdrop is clicked.
|
80 | * @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
|
81 | */
|
82 | onBackdropClick?: React.ReactEventHandler<{}>;
|
83 | /**
|
84 | * Callback fired when the component requests to be closed.
|
85 | * The `reason` parameter can optionally be used to control the response to `onClose`.
|
86 | *
|
87 | * @param {object} event The event source of the callback.
|
88 | * @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
|
89 | */
|
90 | onClose?: {
|
91 | bivarianceHack(event: {}, reason: 'backdropClick' | 'escapeKeyDown'): void;
|
92 | }['bivarianceHack'];
|
93 | /**
|
94 | * If `true`, the component is shown.
|
95 | */
|
96 | open: boolean;
|
97 | /**
|
98 | * The props used for each slot inside the Modal.
|
99 | * @default {}
|
100 | */
|
101 | slotProps?: {
|
102 | root?: SlotComponentProps<'div', ModalRootSlotPropsOverrides, ModalOwnerState>;
|
103 | backdrop?: SlotComponentProps<'div', ModalBackdropSlotPropsOverrides, ModalOwnerState>;
|
104 | };
|
105 | /**
|
106 | * The components used for each slot inside the Modal.
|
107 | * Either a string to use a HTML element or a component.
|
108 | * @default {}
|
109 | */
|
110 | slots?: ModalSlots;
|
111 | }
|
112 | export interface ModalSlots {
|
113 | /**
|
114 | * The component that renders the root.
|
115 | * @default 'div'
|
116 | */
|
117 | root?: React.ElementType;
|
118 | /**
|
119 | * The component that renders the backdrop.
|
120 | */
|
121 | backdrop?: React.ElementType;
|
122 | }
|
123 | export interface ModalTypeMap<AdditionalProps = {}, RootComponentType extends React.ElementType = 'div'> {
|
124 | props: ModalOwnProps & AdditionalProps;
|
125 | defaultComponent: RootComponentType;
|
126 | }
|
127 | /**
|
128 | * Utility to create component types that inherit props from Modal.
|
129 | */
|
130 | export interface ExtendModalTypeMap<M extends OverridableTypeMap> {
|
131 | props: M['props'] & ModalTypeMap['props'];
|
132 | defaultComponent: M['defaultComponent'];
|
133 | }
|
134 | export type ExtendModal<M extends OverridableTypeMap> = OverridableComponent<ExtendModalTypeMap<M>>;
|
135 | export type ModalProps<RootComponentType extends React.ElementType = ModalTypeMap['defaultComponent']> = PolymorphicProps<ModalTypeMap<{}, RootComponentType>, RootComponentType>;
|
136 | export type ModalOwnerState = Simplify<ModalOwnProps & {
|
137 | closeAfterTransition: boolean;
|
138 | disableAutoFocus: boolean;
|
139 | disableEnforceFocus: boolean;
|
140 | disableEscapeKeyDown: boolean;
|
141 | disablePortal: boolean;
|
142 | disableRestoreFocus: boolean;
|
143 | disableScrollLock: boolean;
|
144 | exited: boolean;
|
145 | hideBackdrop: boolean;
|
146 | keepMounted: boolean;
|
147 | }>;
|
148 | export interface ModalRootSlotProps {
|
149 | children: React.ReactNode;
|
150 | className?: string;
|
151 | onKeyDown: React.KeyboardEventHandler;
|
152 | ownerState: ModalOwnerState;
|
153 | role: React.AriaRole;
|
154 | }
|
155 | export interface ModalBackdropSlotProps {
|
156 | 'aria-hidden': React.AriaAttributes['aria-hidden'];
|
157 | children?: React.ReactNode;
|
158 | onClick: React.MouseEventHandler;
|
159 | open: boolean;
|
160 | ownerState: ModalOwnerState;
|
161 | }
|