1 | 'use client';
|
2 |
|
3 | import _extends from "@babel/runtime/helpers/esm/extends";
|
4 | import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
5 | const _excluded = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
|
6 | import * as React from 'react';
|
7 | import PropTypes from 'prop-types';
|
8 | import { elementAcceptingRef, HTMLElementType } from '@mui/utils';
|
9 | import { useSlotProps } from '../utils';
|
10 | import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
|
11 | import { unstable_composeClasses as composeClasses } from '../composeClasses';
|
12 | import { Portal } from '../Portal';
|
13 | import { unstable_useModal as useModal } from '../unstable_useModal';
|
14 | import { FocusTrap } from '../FocusTrap';
|
15 | import { getModalUtilityClass } from './modalClasses';
|
16 | import { jsx as _jsx } from "react/jsx-runtime";
|
17 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
18 | const useUtilityClasses = ownerState => {
|
19 | const {
|
20 | open,
|
21 | exited
|
22 | } = ownerState;
|
23 | const slots = {
|
24 | root: ['root', !open && exited && 'hidden'],
|
25 | backdrop: ['backdrop']
|
26 | };
|
27 | return composeClasses(slots, useClassNamesOverride(getModalUtilityClass));
|
28 | };
|
29 |
|
30 |
|
31 |
|
32 |
|
33 |
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 | const Modal = React.forwardRef(function Modal(props, forwardedRef) {
|
52 | var _slots$root;
|
53 | const {
|
54 | children,
|
55 | closeAfterTransition = false,
|
56 | container,
|
57 | disableAutoFocus = false,
|
58 | disableEnforceFocus = false,
|
59 | disableEscapeKeyDown = false,
|
60 | disablePortal = false,
|
61 | disableRestoreFocus = false,
|
62 | disableScrollLock = false,
|
63 | hideBackdrop = false,
|
64 | keepMounted = false,
|
65 | onBackdropClick,
|
66 | open,
|
67 | slotProps = {},
|
68 | slots = {}
|
69 | } = props,
|
70 | other = _objectWithoutPropertiesLoose(props, _excluded);
|
71 | const propsWithDefaults = _extends({}, props, {
|
72 | closeAfterTransition,
|
73 | disableAutoFocus,
|
74 | disableEnforceFocus,
|
75 | disableEscapeKeyDown,
|
76 | disablePortal,
|
77 | disableRestoreFocus,
|
78 | disableScrollLock,
|
79 | hideBackdrop,
|
80 | keepMounted
|
81 | });
|
82 | const {
|
83 | getRootProps,
|
84 | getBackdropProps,
|
85 | getTransitionProps,
|
86 | portalRef,
|
87 | isTopModal,
|
88 | exited,
|
89 | hasTransition
|
90 | } = useModal(_extends({}, propsWithDefaults, {
|
91 | rootRef: forwardedRef
|
92 | }));
|
93 | const ownerState = _extends({}, propsWithDefaults, {
|
94 | exited,
|
95 | hasTransition
|
96 | });
|
97 | const classes = useUtilityClasses(ownerState);
|
98 | const childProps = {};
|
99 | if (children.props.tabIndex === undefined) {
|
100 | childProps.tabIndex = '-1';
|
101 | }
|
102 |
|
103 |
|
104 | if (hasTransition) {
|
105 | const {
|
106 | onEnter,
|
107 | onExited
|
108 | } = getTransitionProps();
|
109 | childProps.onEnter = onEnter;
|
110 | childProps.onExited = onExited;
|
111 | }
|
112 | const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
|
113 | const rootProps = useSlotProps({
|
114 | elementType: Root,
|
115 | externalSlotProps: slotProps.root,
|
116 | externalForwardedProps: other,
|
117 | getSlotProps: getRootProps,
|
118 | className: classes.root,
|
119 | ownerState
|
120 | });
|
121 | const BackdropComponent = slots.backdrop;
|
122 | const backdropProps = useSlotProps({
|
123 | elementType: BackdropComponent,
|
124 | externalSlotProps: slotProps.backdrop,
|
125 | getSlotProps: otherHandlers => {
|
126 | return getBackdropProps(_extends({}, otherHandlers, {
|
127 | onClick: e => {
|
128 | if (onBackdropClick) {
|
129 | onBackdropClick(e);
|
130 | }
|
131 | if (otherHandlers != null && otherHandlers.onClick) {
|
132 | otherHandlers.onClick(e);
|
133 | }
|
134 | }
|
135 | }));
|
136 | },
|
137 | className: classes.backdrop,
|
138 | ownerState
|
139 | });
|
140 | if (!keepMounted && !open && (!hasTransition || exited)) {
|
141 | return null;
|
142 | }
|
143 | return _jsx(Portal, {
|
144 | ref: portalRef,
|
145 | container: container,
|
146 | disablePortal: disablePortal,
|
147 | children: _jsxs(Root, _extends({}, rootProps, {
|
148 | children: [!hideBackdrop && BackdropComponent ? _jsx(BackdropComponent, _extends({}, backdropProps)) : null, _jsx(FocusTrap, {
|
149 | disableEnforceFocus: disableEnforceFocus,
|
150 | disableAutoFocus: disableAutoFocus,
|
151 | disableRestoreFocus: disableRestoreFocus,
|
152 | isEnabled: isTopModal,
|
153 | open: open,
|
154 | children: React.cloneElement(children, childProps)
|
155 | })]
|
156 | }))
|
157 | });
|
158 | });
|
159 | process.env.NODE_ENV !== "production" ? Modal.propTypes = {
|
160 |
|
161 |
|
162 |
|
163 |
|
164 | |
165 |
|
166 |
|
167 | children: elementAcceptingRef.isRequired,
|
168 | |
169 |
|
170 |
|
171 |
|
172 | closeAfterTransition: PropTypes.bool,
|
173 | |
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 |
|
183 | container: PropTypes .oneOfType([HTMLElementType, PropTypes.func]),
|
184 | |
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 |
|
191 |
|
192 |
|
193 | disableAutoFocus: PropTypes.bool,
|
194 | |
195 |
|
196 |
|
197 |
|
198 |
|
199 |
|
200 |
|
201 | disableEnforceFocus: PropTypes.bool,
|
202 | |
203 |
|
204 |
|
205 |
|
206 | disableEscapeKeyDown: PropTypes.bool,
|
207 | |
208 |
|
209 |
|
210 |
|
211 | disablePortal: PropTypes.bool,
|
212 | |
213 |
|
214 |
|
215 |
|
216 |
|
217 | disableRestoreFocus: PropTypes.bool,
|
218 | |
219 |
|
220 |
|
221 |
|
222 | disableScrollLock: PropTypes.bool,
|
223 | |
224 |
|
225 |
|
226 |
|
227 | hideBackdrop: PropTypes.bool,
|
228 | |
229 |
|
230 |
|
231 |
|
232 |
|
233 |
|
234 | keepMounted: PropTypes.bool,
|
235 | |
236 |
|
237 |
|
238 |
|
239 | onBackdropClick: PropTypes.func,
|
240 | |
241 |
|
242 |
|
243 |
|
244 |
|
245 |
|
246 |
|
247 | onClose: PropTypes.func,
|
248 | |
249 |
|
250 |
|
251 | onTransitionEnter: PropTypes.func,
|
252 | |
253 |
|
254 |
|
255 | onTransitionExited: PropTypes.func,
|
256 | |
257 |
|
258 |
|
259 | open: PropTypes.bool.isRequired,
|
260 | |
261 |
|
262 |
|
263 |
|
264 | slotProps: PropTypes.shape({
|
265 | backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
266 | root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
267 | }),
|
268 | |
269 |
|
270 |
|
271 |
|
272 |
|
273 | slots: PropTypes.shape({
|
274 | backdrop: PropTypes.elementType,
|
275 | root: PropTypes.elementType
|
276 | })
|
277 | } : void 0;
|
278 | export { Modal }; |
\ | No newline at end of file |