1 | import _extends from "@babel/runtime/helpers/esm/extends";
|
2 | import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
3 | import * as React from 'react';
|
4 | import PropTypes from 'prop-types';
|
5 | import { elementAcceptingRef, HTMLElementType, unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_createChainedFunction as createChainedFunction, unstable_useEventCallback as useEventCallback } from '@mui/utils';
|
6 | import composeClasses from '../composeClasses';
|
7 | import Portal from '../Portal';
|
8 | import ModalManager, { ariaHidden } from './ModalManager';
|
9 | import FocusTrap from '../FocusTrap';
|
10 | import { getModalUtilityClass } from './modalClasses';
|
11 | import { useSlotProps } from '../utils';
|
12 | import { useClassNamesOverride } from '../utils/ClassNameConfigurator';
|
13 | import { jsx as _jsx } from "react/jsx-runtime";
|
14 | import { jsxs as _jsxs } from "react/jsx-runtime";
|
15 | var useUtilityClasses = function useUtilityClasses(ownerState) {
|
16 | var open = ownerState.open,
|
17 | exited = ownerState.exited;
|
18 | var slots = {
|
19 | root: ['root', !open && exited && 'hidden'],
|
20 | backdrop: ['backdrop']
|
21 | };
|
22 | return composeClasses(slots, useClassNamesOverride(getModalUtilityClass));
|
23 | };
|
24 | function getContainer(container) {
|
25 | return typeof container === 'function' ? container() : container;
|
26 | }
|
27 | function getHasTransition(children) {
|
28 | return children ? children.props.hasOwnProperty('in') : false;
|
29 | }
|
30 |
|
31 |
|
32 |
|
33 | var defaultManager = new ModalManager();
|
34 |
|
35 |
|
36 |
|
37 |
|
38 |
|
39 |
|
40 |
|
41 |
|
42 |
|
43 |
|
44 |
|
45 |
|
46 |
|
47 |
|
48 |
|
49 |
|
50 |
|
51 |
|
52 |
|
53 |
|
54 |
|
55 |
|
56 | var Modal = React.forwardRef(function Modal(props, forwardedRef) {
|
57 | var _props$ariaHidden, _slots$root;
|
58 | var children = props.children,
|
59 | _props$closeAfterTran = props.closeAfterTransition,
|
60 | closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
|
61 | container = props.container,
|
62 | _props$disableAutoFoc = props.disableAutoFocus,
|
63 | disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
|
64 | _props$disableEnforce = props.disableEnforceFocus,
|
65 | disableEnforceFocus = _props$disableEnforce === void 0 ? false : _props$disableEnforce,
|
66 | _props$disableEscapeK = props.disableEscapeKeyDown,
|
67 | disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,
|
68 | _props$disablePortal = props.disablePortal,
|
69 | disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
|
70 | _props$disableRestore = props.disableRestoreFocus,
|
71 | disableRestoreFocus = _props$disableRestore === void 0 ? false : _props$disableRestore,
|
72 | _props$disableScrollL = props.disableScrollLock,
|
73 | disableScrollLock = _props$disableScrollL === void 0 ? false : _props$disableScrollL,
|
74 | _props$hideBackdrop = props.hideBackdrop,
|
75 | hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,
|
76 | _props$keepMounted = props.keepMounted,
|
77 | keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
|
78 | _props$manager = props.manager,
|
79 | managerProp = _props$manager === void 0 ? defaultManager : _props$manager,
|
80 | onBackdropClick = props.onBackdropClick,
|
81 | onClose = props.onClose,
|
82 | onKeyDown = props.onKeyDown,
|
83 | open = props.open,
|
84 | onTransitionEnter = props.onTransitionEnter,
|
85 | onTransitionExited = props.onTransitionExited,
|
86 | _props$slotProps = props.slotProps,
|
87 | slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
|
88 | _props$slots = props.slots,
|
89 | slots = _props$slots === void 0 ? {} : _props$slots,
|
90 | other = _objectWithoutProperties(props, ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"]);
|
91 |
|
92 | var manager = managerProp;
|
93 | var _React$useState = React.useState(!open),
|
94 | exited = _React$useState[0],
|
95 | setExited = _React$useState[1];
|
96 | var modal = React.useRef({});
|
97 | var mountNodeRef = React.useRef(null);
|
98 | var modalRef = React.useRef(null);
|
99 | var handleRef = useForkRef(modalRef, forwardedRef);
|
100 | var hasTransition = getHasTransition(children);
|
101 | var ariaHiddenProp = (_props$ariaHidden = props['aria-hidden']) != null ? _props$ariaHidden : true;
|
102 | var getDoc = function getDoc() {
|
103 | return ownerDocument(mountNodeRef.current);
|
104 | };
|
105 | var getModal = function getModal() {
|
106 | modal.current.modalRef = modalRef.current;
|
107 | modal.current.mountNode = mountNodeRef.current;
|
108 | return modal.current;
|
109 | };
|
110 | var handleMounted = function handleMounted() {
|
111 | manager.mount(getModal(), {
|
112 | disableScrollLock: disableScrollLock
|
113 | });
|
114 |
|
115 |
|
116 | if (modalRef.current) {
|
117 | modalRef.current.scrollTop = 0;
|
118 | }
|
119 | };
|
120 | var handleOpen = useEventCallback(function () {
|
121 | var resolvedContainer = getContainer(container) || getDoc().body;
|
122 | manager.add(getModal(), resolvedContainer);
|
123 |
|
124 |
|
125 | if (modalRef.current) {
|
126 | handleMounted();
|
127 | }
|
128 | });
|
129 | var isTopModal = React.useCallback(function () {
|
130 | return manager.isTopModal(getModal());
|
131 | }, [manager]);
|
132 | var handlePortalRef = useEventCallback(function (node) {
|
133 | mountNodeRef.current = node;
|
134 | if (!node || !modalRef.current) {
|
135 | return;
|
136 | }
|
137 | if (open && isTopModal()) {
|
138 | handleMounted();
|
139 | } else {
|
140 | ariaHidden(modalRef.current, ariaHiddenProp);
|
141 | }
|
142 | });
|
143 | var handleClose = React.useCallback(function () {
|
144 | manager.remove(getModal(), ariaHiddenProp);
|
145 | }, [manager, ariaHiddenProp]);
|
146 | React.useEffect(function () {
|
147 | return function () {
|
148 | handleClose();
|
149 | };
|
150 | }, [handleClose]);
|
151 | React.useEffect(function () {
|
152 | if (open) {
|
153 | handleOpen();
|
154 | } else if (!hasTransition || !closeAfterTransition) {
|
155 | handleClose();
|
156 | }
|
157 | }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
|
158 | var ownerState = _extends({}, props, {
|
159 | closeAfterTransition: closeAfterTransition,
|
160 | disableAutoFocus: disableAutoFocus,
|
161 | disableEnforceFocus: disableEnforceFocus,
|
162 | disableEscapeKeyDown: disableEscapeKeyDown,
|
163 | disablePortal: disablePortal,
|
164 | disableRestoreFocus: disableRestoreFocus,
|
165 | disableScrollLock: disableScrollLock,
|
166 | exited: exited,
|
167 | hideBackdrop: hideBackdrop,
|
168 | keepMounted: keepMounted
|
169 | });
|
170 | var classes = useUtilityClasses(ownerState);
|
171 | var handleEnter = function handleEnter() {
|
172 | setExited(false);
|
173 | if (onTransitionEnter) {
|
174 | onTransitionEnter();
|
175 | }
|
176 | };
|
177 | var handleExited = function handleExited() {
|
178 | setExited(true);
|
179 | if (onTransitionExited) {
|
180 | onTransitionExited();
|
181 | }
|
182 | if (closeAfterTransition) {
|
183 | handleClose();
|
184 | }
|
185 | };
|
186 | var handleBackdropClick = function handleBackdropClick(event) {
|
187 | if (event.target !== event.currentTarget) {
|
188 | return;
|
189 | }
|
190 | if (onBackdropClick) {
|
191 | onBackdropClick(event);
|
192 | }
|
193 | if (onClose) {
|
194 | onClose(event, 'backdropClick');
|
195 | }
|
196 | };
|
197 | var handleKeyDown = function handleKeyDown(event) {
|
198 | if (onKeyDown) {
|
199 | onKeyDown(event);
|
200 | }
|
201 |
|
202 |
|
203 |
|
204 |
|
205 |
|
206 |
|
207 |
|
208 | if (event.key !== 'Escape' || !isTopModal()) {
|
209 | return;
|
210 | }
|
211 | if (!disableEscapeKeyDown) {
|
212 |
|
213 | event.stopPropagation();
|
214 | if (onClose) {
|
215 | onClose(event, 'escapeKeyDown');
|
216 | }
|
217 | }
|
218 | };
|
219 | var childProps = {};
|
220 | if (children.props.tabIndex === undefined) {
|
221 | childProps.tabIndex = '-1';
|
222 | }
|
223 |
|
224 |
|
225 | if (hasTransition) {
|
226 | childProps.onEnter = createChainedFunction(handleEnter, children.props.onEnter);
|
227 | childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
|
228 | }
|
229 | var Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
|
230 | var rootProps = useSlotProps({
|
231 | elementType: Root,
|
232 | externalSlotProps: slotProps.root,
|
233 | externalForwardedProps: other,
|
234 | additionalProps: {
|
235 | ref: handleRef,
|
236 | role: 'presentation',
|
237 | onKeyDown: handleKeyDown
|
238 | },
|
239 | className: classes.root,
|
240 | ownerState: ownerState
|
241 | });
|
242 | var BackdropComponent = slots.backdrop;
|
243 | var backdropProps = useSlotProps({
|
244 | elementType: BackdropComponent,
|
245 | externalSlotProps: slotProps.backdrop,
|
246 | additionalProps: {
|
247 | 'aria-hidden': true,
|
248 | onClick: handleBackdropClick,
|
249 | open: open
|
250 | },
|
251 | className: classes.backdrop,
|
252 | ownerState: ownerState
|
253 | });
|
254 | if (!keepMounted && !open && (!hasTransition || exited)) {
|
255 | return null;
|
256 | }
|
257 | return _jsx(Portal
|
258 |
|
259 | , {
|
260 | ref: handlePortalRef,
|
261 | container: container,
|
262 | disablePortal: disablePortal,
|
263 | children: _jsxs(Root, _extends({}, rootProps, {
|
264 | children: [!hideBackdrop && BackdropComponent ? _jsx(BackdropComponent, _extends({}, backdropProps)) : null, _jsx(FocusTrap, {
|
265 | disableEnforceFocus: disableEnforceFocus,
|
266 | disableAutoFocus: disableAutoFocus,
|
267 | disableRestoreFocus: disableRestoreFocus,
|
268 | isEnabled: isTopModal,
|
269 | open: open,
|
270 | children: React.cloneElement(children, childProps)
|
271 | })]
|
272 | }))
|
273 | });
|
274 | });
|
275 | process.env.NODE_ENV !== "production" ? Modal.propTypes = {
|
276 |
|
277 |
|
278 |
|
279 |
|
280 | |
281 |
|
282 |
|
283 | children: elementAcceptingRef.isRequired,
|
284 | |
285 |
|
286 |
|
287 |
|
288 | closeAfterTransition: PropTypes.bool,
|
289 | |
290 |
|
291 |
|
292 |
|
293 |
|
294 |
|
295 |
|
296 | container: PropTypes .oneOfType([HTMLElementType, PropTypes.func]),
|
297 | |
298 |
|
299 |
|
300 |
|
301 |
|
302 |
|
303 |
|
304 |
|
305 |
|
306 | disableAutoFocus: PropTypes.bool,
|
307 | |
308 |
|
309 |
|
310 |
|
311 |
|
312 |
|
313 |
|
314 | disableEnforceFocus: PropTypes.bool,
|
315 | |
316 |
|
317 |
|
318 |
|
319 | disableEscapeKeyDown: PropTypes.bool,
|
320 | |
321 |
|
322 |
|
323 |
|
324 | disablePortal: PropTypes.bool,
|
325 | |
326 |
|
327 |
|
328 |
|
329 |
|
330 | disableRestoreFocus: PropTypes.bool,
|
331 | |
332 |
|
333 |
|
334 |
|
335 | disableScrollLock: PropTypes.bool,
|
336 | |
337 |
|
338 |
|
339 |
|
340 | hideBackdrop: PropTypes.bool,
|
341 | |
342 |
|
343 |
|
344 |
|
345 |
|
346 |
|
347 | keepMounted: PropTypes.bool,
|
348 | |
349 |
|
350 |
|
351 |
|
352 | onBackdropClick: PropTypes.func,
|
353 | |
354 |
|
355 |
|
356 |
|
357 |
|
358 |
|
359 |
|
360 | onClose: PropTypes.func,
|
361 | |
362 |
|
363 |
|
364 | open: PropTypes.bool.isRequired,
|
365 | |
366 |
|
367 |
|
368 |
|
369 | slotProps: PropTypes.shape({
|
370 | backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
|
371 | root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
|
372 | }),
|
373 | |
374 |
|
375 |
|
376 |
|
377 |
|
378 | slots: PropTypes.shape({
|
379 | backdrop: PropTypes.elementType,
|
380 | root: PropTypes.elementType
|
381 | })
|
382 | } : void 0;
|
383 | export default Modal; |
\ | No newline at end of file |