Current File : /home/emergentqj/actioncivile/pre-auth/.8352c036a19b0051d0217d27d25e3f4a/static/node_modules/@material-ui/core/esm/Modal/Modal.js
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { getThemeProps, useTheme } from '@material-ui/styles';
import { elementAcceptingRef, HTMLElementType } from '@material-ui/utils';
import deprecatedPropType from '../utils/deprecatedPropType';
import ownerDocument from '../utils/ownerDocument';
import Portal from '../Portal';
import createChainedFunction from '../utils/createChainedFunction';
import useForkRef from '../utils/useForkRef';
import useEventCallback from '../utils/useEventCallback';
import zIndex from '../styles/zIndex';
import ModalManager, { ariaHidden } from './ModalManager';
import TrapFocus from '../Unstable_TrapFocus';
import SimpleBackdrop from './SimpleBackdrop';
function getContainer(container) {
container = typeof container === 'function' ? container() : container;
return ReactDOM.findDOMNode(container);
}
function getHasTransition(props) {
return props.children ? props.children.props.hasOwnProperty('in') : false;
} // A modal manager used to track and manage the state of open Modals.
// Modals don't open on the server so this won't conflict with concurrent requests.
var defaultManager = new ModalManager();
export var styles = function styles(theme) {
return {
/* Styles applied to the root element. */
root: {
position: 'fixed',
zIndex: theme.zIndex.modal,
right: 0,
bottom: 0,
top: 0,
left: 0
},
/* Styles applied to the root element if the `Modal` has exited. */
hidden: {
visibility: 'hidden'
}
};
};
/**
* Modal is a lower-level construct that is leveraged by the following components:
*
* - [Dialog](/api/dialog/)
* - [Drawer](/api/drawer/)
* - [Menu](/api/menu/)
* - [Popover](/api/popover/)
*
* If you are creating a modal dialog, you probably want to use the [Dialog](/api/dialog/) component
* rather than directly using Modal.
*
* This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
*/
var Modal = /*#__PURE__*/React.forwardRef(function Modal(inProps, ref) {
var theme = useTheme();
var props = getThemeProps({
name: 'MuiModal',
props: _extends({}, inProps),
theme: theme
});
var _props$BackdropCompon = props.BackdropComponent,
BackdropComponent = _props$BackdropCompon === void 0 ? SimpleBackdrop : _props$BackdropCompon,
BackdropProps = props.BackdropProps,
children = props.children,
_props$closeAfterTran = props.closeAfterTransition,
closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
container = props.container,
_props$disableAutoFoc = props.disableAutoFocus,
disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
_props$disableBackdro = props.disableBackdropClick,
disableBackdropClick = _props$disableBackdro === void 0 ? false : _props$disableBackdro,
_props$disableEnforce = props.disableEnforceFocus,
disableEnforceFocus = _props$disableEnforce === void 0 ? false : _props$disableEnforce,
_props$disableEscapeK = props.disableEscapeKeyDown,
disableEscapeKeyDown = _props$disableEscapeK === void 0 ? false : _props$disableEscapeK,
_props$disablePortal = props.disablePortal,
disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
_props$disableRestore = props.disableRestoreFocus,
disableRestoreFocus = _props$disableRestore === void 0 ? false : _props$disableRestore,
_props$disableScrollL = props.disableScrollLock,
disableScrollLock = _props$disableScrollL === void 0 ? false : _props$disableScrollL,
_props$hideBackdrop = props.hideBackdrop,
hideBackdrop = _props$hideBackdrop === void 0 ? false : _props$hideBackdrop,
_props$keepMounted = props.keepMounted,
keepMounted = _props$keepMounted === void 0 ? false : _props$keepMounted,
_props$manager = props.manager,
manager = _props$manager === void 0 ? defaultManager : _props$manager,
onBackdropClick = props.onBackdropClick,
onClose = props.onClose,
onEscapeKeyDown = props.onEscapeKeyDown,
onRendered = props.onRendered,
open = props.open,
other = _objectWithoutProperties(props, ["BackdropComponent", "BackdropProps", "children", "closeAfterTransition", "container", "disableAutoFocus", "disableBackdropClick", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onEscapeKeyDown", "onRendered", "open"]);
var _React$useState = React.useState(true),
exited = _React$useState[0],
setExited = _React$useState[1];
var modal = React.useRef({});
var mountNodeRef = React.useRef(null);
var modalRef = React.useRef(null);
var handleRef = useForkRef(modalRef, ref);
var hasTransition = getHasTransition(props);
var getDoc = function getDoc() {
return ownerDocument(mountNodeRef.current);
};
var getModal = function getModal() {
modal.current.modalRef = modalRef.current;
modal.current.mountNode = mountNodeRef.current;
return modal.current;
};
var handleMounted = function handleMounted() {
manager.mount(getModal(), {
disableScrollLock: disableScrollLock
}); // Fix a bug on Chrome where the scroll isn't initially 0.
modalRef.current.scrollTop = 0;
};
var handleOpen = useEventCallback(function () {
var resolvedContainer = getContainer(container) || getDoc().body;
manager.add(getModal(), resolvedContainer); // The element was already mounted.
if (modalRef.current) {
handleMounted();
}
});
var isTopModal = React.useCallback(function () {
return manager.isTopModal(getModal());
}, [manager]);
var handlePortalRef = useEventCallback(function (node) {
mountNodeRef.current = node;
if (!node) {
return;
}
if (onRendered) {
onRendered();
}
if (open && isTopModal()) {
handleMounted();
} else {
ariaHidden(modalRef.current, true);
}
});
var handleClose = React.useCallback(function () {
manager.remove(getModal());
}, [manager]);
React.useEffect(function () {
return function () {
handleClose();
};
}, [handleClose]);
React.useEffect(function () {
if (open) {
handleOpen();
} else if (!hasTransition || !closeAfterTransition) {
handleClose();
}
}, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
if (!keepMounted && !open && (!hasTransition || exited)) {
return null;
}
var handleEnter = function handleEnter() {
setExited(false);
};
var handleExited = function handleExited() {
setExited(true);
if (closeAfterTransition) {
handleClose();
}
};
var handleBackdropClick = function handleBackdropClick(event) {
if (event.target !== event.currentTarget) {
return;
}
if (onBackdropClick) {
onBackdropClick(event);
}
if (!disableBackdropClick && onClose) {
onClose(event, 'backdropClick');
}
};
var handleKeyDown = function handleKeyDown(event) {
// The handler doesn't take event.defaultPrevented into account:
//
// event.preventDefault() is meant to stop default behaviours like
// clicking a checkbox to check it, hitting a button to submit a form,
// and hitting left arrow to move the cursor in a text input etc.
// Only special HTML elements have these default behaviors.
if (event.key !== 'Escape' || !isTopModal()) {
return;
}
if (onEscapeKeyDown) {
onEscapeKeyDown(event);
}
if (!disableEscapeKeyDown) {
// Swallow the event, in case someone is listening for the escape key on the body.
event.stopPropagation();
if (onClose) {
onClose(event, 'escapeKeyDown');
}
}
};
var inlineStyle = styles(theme || {
zIndex: zIndex
});
var childProps = {};
if (children.props.tabIndex === undefined) {
childProps.tabIndex = children.props.tabIndex || '-1';
} // It's a Transition like component
if (hasTransition) {
childProps.onEnter = createChainedFunction(handleEnter, children.props.onEnter);
childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
}
return /*#__PURE__*/React.createElement(Portal, {
ref: handlePortalRef,
container: container,
disablePortal: disablePortal
}, /*#__PURE__*/React.createElement("div", _extends({
ref: handleRef,
onKeyDown: handleKeyDown,
role: "presentation"
}, other, {
style: _extends({}, inlineStyle.root, !open && exited ? inlineStyle.hidden : {}, other.style)
}), hideBackdrop ? null : /*#__PURE__*/React.createElement(BackdropComponent, _extends({
open: open,
onClick: handleBackdropClick
}, BackdropProps)), /*#__PURE__*/React.createElement(TrapFocus, {
disableEnforceFocus: disableEnforceFocus,
disableAutoFocus: disableAutoFocus,
disableRestoreFocus: disableRestoreFocus,
getDoc: getDoc,
isEnabled: isTopModal,
open: open
}, /*#__PURE__*/React.cloneElement(children, childProps))));
});
process.env.NODE_ENV !== "production" ? Modal.propTypes = {
/**
* A backdrop component. This prop enables custom backdrop rendering.
*/
BackdropComponent: PropTypes.elementType,
/**
* Props applied to the [`Backdrop`](/api/backdrop/) element.
*/
BackdropProps: PropTypes.object,
/**
* A single child content element.
*/
children: elementAcceptingRef.isRequired,
/**
* When set to true the Modal waits until a nested Transition is completed before closing.
*/
closeAfterTransition: PropTypes.bool,
/**
* A HTML element, component instance, or function that returns either.
* The `container` will have the portal children appended to it.
*
* By default, it uses the body of the top-level document object,
* so it's simply `document.body` most of the time.
*/
container: PropTypes
/* @typescript-to-proptypes-ignore */
.oneOfType([HTMLElementType, PropTypes.instanceOf(React.Component), PropTypes.func]),
/**
* If `true`, the modal will not automatically shift focus to itself when it opens, and
* replace it to the last focused element when it closes.
* This also works correctly with any modal children that have the `disableAutoFocus` prop.
*
* Generally this should never be set to `true` as it makes the modal less
* accessible to assistive technologies, like screen readers.
*/
disableAutoFocus: PropTypes.bool,
/**
* If `true`, clicking the backdrop will not fire `onClose`.
*/
disableBackdropClick: deprecatedPropType(PropTypes.bool, 'Use the onClose prop with the `reason` argument to filter the `backdropClick` events.'),
/**
* If `true`, the modal will not prevent focus from leaving the modal while open.
*
* Generally this should never be set to `true` as it makes the modal less
* accessible to assistive technologies, like screen readers.
*/
disableEnforceFocus: PropTypes.bool,
/**
* If `true`, hitting escape will not fire `onClose`.
*/
disableEscapeKeyDown: PropTypes.bool,
/**
* Disable the portal behavior.
* The children stay within it's parent DOM hierarchy.
*/
disablePortal: PropTypes.bool,
/**
* If `true`, the modal will not restore focus to previously focused element once
* modal is hidden.
*/
disableRestoreFocus: PropTypes.bool,
/**
* Disable the scroll lock behavior.
*/
disableScrollLock: PropTypes.bool,
/**
* If `true`, the backdrop is not rendered.
*/
hideBackdrop: PropTypes.bool,
/**
* Always keep the children in the DOM.
* This prop can be useful in SEO situation or
* when you want to maximize the responsiveness of the Modal.
*/
keepMounted: PropTypes.bool,
/**
* @ignore
*/
manager: PropTypes.object,
/**
* Callback fired when the backdrop is clicked.
*/
onBackdropClick: deprecatedPropType(PropTypes.func, 'Use the onClose prop with the `reason` argument to handle the `backdropClick` events.'),
/**
* Callback fired when the component requests to be closed.
* The `reason` parameter can optionally be used to control the response to `onClose`.
*
* @param {object} event The event source of the callback.
* @param {string} reason Can be: `"escapeKeyDown"`, `"backdropClick"`.
*/
onClose: PropTypes.func,
/**
* Callback fired when the escape key is pressed,
* `disableEscapeKeyDown` is false and the modal is in focus.
*/
onEscapeKeyDown: deprecatedPropType(PropTypes.func, 'Use the onClose prop with the `reason` argument to handle the `escapeKeyDown` events.'),
/**
* Callback fired once the children has been mounted into the `container`.
* It signals that the `open={true}` prop took effect.
*
* This prop will be removed in v5, the ref can be used instead.
*/
onRendered: deprecatedPropType(PropTypes.func, 'Use the ref instead.'),
/**
* If `true`, the modal is open.
*/
open: PropTypes.bool.isRequired
} : void 0;
export default Modal;
Mini Shell