Diffusion Open Access Compliance Check Tool (OACCT) (issn4frontend) Browse

rOACCT/node_modules/@mui/base/ModalUnstyled/ModalUnstyled.js
49c99f97fe9aissn4frontend

ModalUnstyled.js
View Options

			import _extends from "@babel/runtime/helpers/esm/extends";
			import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
			const _excluded = ["children", "classes", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
			import * as React from 'react';
			import PropTypes from 'prop-types';
			import { elementAcceptingRef, HTMLElementType, unstable_ownerDocument as ownerDocument, unstable_useForkRef as useForkRef, unstable_createChainedFunction as createChainedFunction, unstable_useEventCallback as useEventCallback } from '@mui/utils';
			import composeClasses from '../composeClasses';
			import Portal from '../Portal';
			import ModalManager, { ariaHidden } from './ModalManager';
			import FocusTrap from '../FocusTrap';
			import { getModalUtilityClass } from './modalUnstyledClasses';
			import { useSlotProps } from '../utils';
			import { jsx as _jsx } from "react/jsx-runtime";
			import { jsxs as _jsxs } from "react/jsx-runtime";
			const useUtilityClasses = ownerState => {
			const {
			open,
			exited,
			classes
			} = ownerState;
			const slots = {
			root: ['root', !open && exited && 'hidden'],
			backdrop: ['backdrop']
			};
			return composeClasses(slots, getModalUtilityClass, classes);
			};
			function getContainer(container) {
			return typeof container === 'function' ? container() : container;
			}
			function getHasTransition(children) {
			return children ? 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.
			const defaultManager = new ModalManager();

			/**
			* Modal is a lower-level construct that is leveraged by the following components:
			*
			* * [Dialog](https://mui.com/material-ui/api/dialog/)
			* * [Drawer](https://mui.com/material-ui/api/drawer/)
			* * [Menu](https://mui.com/material-ui/api/menu/)
			* * [Popover](https://mui.com/material-ui/api/popover/)
			*
			* If you are creating a modal dialog, you probably want to use the [Dialog](https://mui.com/material-ui/api/dialog/) component
			* rather than directly using Modal.
			*
			* This component shares many concepts with [react-overlays](https://react-bootstrap.github.io/react-overlays/#modals).
			*
			* Demos:
			*
			* - [Unstyled Modal](https://mui.com/base/react-modal/)
			*
			* API:
			*
			* - [ModalUnstyled API](https://mui.com/base/api/modal-unstyled/)
			*/
			const ModalUnstyled = /#__PURE__/React.forwardRef(function ModalUnstyled(props, forwardedRef) {
			var _props$ariaHidden, _ref;
			const {
			children,
			classes: classesProp,
			closeAfterTransition = false,
			component,
			container,
			disableAutoFocus = false,
			disableEnforceFocus = false,
			disableEscapeKeyDown = false,
			disablePortal = false,
			disableRestoreFocus = false,
			disableScrollLock = false,
			hideBackdrop = false,
			keepMounted = false,
			// private
			manager = defaultManager,
			onBackdropClick,
			onClose,
			onKeyDown,
			open,
			onTransitionEnter,
			onTransitionExited,
			slotProps = {},
			slots = {}
			} = props,
			other = _objectWithoutPropertiesLoose(props, _excluded);
			const [exited, setExited] = React.useState(!open);
			const modal = React.useRef({});
			const mountNodeRef = React.useRef(null);
			const modalRef = React.useRef(null);
			const handleRef = useForkRef(modalRef, forwardedRef);
			const hasTransition = getHasTransition(children);
			const ariaHiddenProp = (_props$ariaHidden = props['aria-hidden']) != null ? _props$ariaHidden : true;
			const getDoc = () => ownerDocument(mountNodeRef.current);
			const getModal = () => {
			modal.current.modalRef = modalRef.current;
			modal.current.mountNode = mountNodeRef.current;
			return modal.current;
			};
			const handleMounted = () => {
			manager.mount(getModal(), {
			disableScrollLock
			});

			// Fix a bug on Chrome where the scroll isn't initially 0.
			if (modalRef.current) {
			modalRef.current.scrollTop = 0;
			}
			};
			const handleOpen = useEventCallback(() => {
			const resolvedContainer = getContainer(container) \|\| getDoc().body;
			manager.add(getModal(), resolvedContainer);

			// The element was already mounted.
			if (modalRef.current) {
			handleMounted();
			}
			});
			const isTopModal = React.useCallback(() => manager.isTopModal(getModal()), [manager]);
			const handlePortalRef = useEventCallback(node => {
			mountNodeRef.current = node;
			if (!node \|\| !modalRef.current) {
			return;
			}
			if (open && isTopModal()) {
			handleMounted();
			} else {
			ariaHidden(modalRef.current, ariaHiddenProp);
			}
			});
			const handleClose = React.useCallback(() => {
			manager.remove(getModal(), ariaHiddenProp);
			}, [manager, ariaHiddenProp]);
			React.useEffect(() => {
			return () => {
			handleClose();
			};
			}, [handleClose]);
			React.useEffect(() => {
			if (open) {
			handleOpen();
			} else if (!hasTransition \|\| !closeAfterTransition) {
			handleClose();
			}
			}, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
			const ownerState = _extends({}, props, {
			classes: classesProp,
			closeAfterTransition,
			disableAutoFocus,
			disableEnforceFocus,
			disableEscapeKeyDown,
			disablePortal,
			disableRestoreFocus,
			disableScrollLock,
			exited,
			hideBackdrop,
			keepMounted
			});
			const classes = useUtilityClasses(ownerState);
			const handleEnter = () => {
			setExited(false);
			if (onTransitionEnter) {
			onTransitionEnter();
			}
			};
			const handleExited = () => {
			setExited(true);
			if (onTransitionExited) {
			onTransitionExited();
			}
			if (closeAfterTransition) {
			handleClose();
			}
			};
			const handleBackdropClick = event => {
			if (event.target !== event.currentTarget) {
			return;
			}
			if (onBackdropClick) {
			onBackdropClick(event);
			}
			if (onClose) {
			onClose(event, 'backdropClick');
			}
			};
			const handleKeyDown = event => {
			if (onKeyDown) {
			onKeyDown(event);
			}

			// The handler doesn't take event.defaultPrevented into account:
			//
			// event.preventDefault() is meant to stop default behaviors 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 (!disableEscapeKeyDown) {
			// Swallow the event, in case someone is listening for the escape key on the body.
			event.stopPropagation();
			if (onClose) {
			onClose(event, 'escapeKeyDown');
			}
			}
			};
			const childProps = {};
			if (children.props.tabIndex === undefined) {
			childProps.tabIndex = '-1';
			}

			// It's a Transition like component
			if (hasTransition) {
			childProps.onEnter = createChainedFunction(handleEnter, children.props.onEnter);
			childProps.onExited = createChainedFunction(handleExited, children.props.onExited);
			}
			const Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
			const rootProps = useSlotProps({
			elementType: Root,
			externalSlotProps: slotProps.root,
			externalForwardedProps: other,
			additionalProps: {
			ref: handleRef,
			role: 'presentation',
			onKeyDown: handleKeyDown
			},
			className: classes.root,
			ownerState
			});
			const BackdropComponent = slots.backdrop;
			const backdropProps = useSlotProps({
			elementType: BackdropComponent,
			externalSlotProps: slotProps.backdrop,
			additionalProps: {
			'aria-hidden': true,
			onClick: handleBackdropClick,
			open
			},
			className: classes.backdrop,
			ownerState
			});
			if (!keepMounted && !open && (!hasTransition \|\| exited)) {
			return null;
			}
			return /#__PURE__/_jsx(Portal
			// @ts-expect-error TODO: include ref to MUI Base Portal props
			, {
			ref: handlePortalRef,
			container: container,
			disablePortal: disablePortal,
			children: /#__PURE__/_jsxs(Root, _extends({}, rootProps, {
			children: [!hideBackdrop && BackdropComponent ? /#__PURE__/_jsx(BackdropComponent, _extends({}, backdropProps)) : null, /#__PURE__/_jsx(FocusTrap, {
			disableEnforceFocus: disableEnforceFocus,
			disableAutoFocus: disableAutoFocus,
			disableRestoreFocus: disableRestoreFocus,
			isEnabled: isTopModal,
			open: open,
			children: /#__PURE__/React.cloneElement(children, childProps)
			})]
			}))
			});
			});
			process.env.NODE_ENV !== "production" ? ModalUnstyled.propTypes /* remove-proptypes */ = {
			// ----------------------------- Warning --------------------------------
			// \| These PropTypes are generated from the TypeScript type definitions \|
			// \| To update them edit TypeScript types and run "yarn proptypes" \|
			// ----------------------------------------------------------------------
			/**
			* A single child content element.
			*/
			children: elementAcceptingRef.isRequired,
			/**
			* Override or extend the styles applied to the component.
			*/
			classes: PropTypes.object,
			/**
			* When set to true the Modal waits until a nested Transition is completed before closing.
			* @default false
			*/
			closeAfterTransition: PropTypes.bool,
			/**
			* The component used for the root node.
			* Either a string to use a HTML element or a component.
			*/
			component: PropTypes.elementType,
			/**
			* An HTML element or function that returns one.
			* 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.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.
			* @default false
			*/
			disableAutoFocus: PropTypes.bool,
			/**
			* 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.
			* @default false
			*/
			disableEnforceFocus: PropTypes.bool,
			/**
			* If `true`, hitting escape will not fire the `onClose` callback.
			* @default false
			*/
			disableEscapeKeyDown: PropTypes.bool,
			/**
			* The `children` will be under the DOM hierarchy of the parent component.
			* @default false
			*/
			disablePortal: PropTypes.bool,
			/**
			* If `true`, the modal will not restore focus to previously focused element once
			* modal is hidden or unmounted.
			* @default false
			*/
			disableRestoreFocus: PropTypes.bool,
			/**
			* Disable the scroll lock behavior.
			* @default false
			*/
			disableScrollLock: PropTypes.bool,
			/**
			* If `true`, the backdrop is not rendered.
			* @default false
			*/
			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.
			* @default false
			*/
			keepMounted: PropTypes.bool,
			/**
			* Callback fired when the backdrop is clicked.
			* @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
			*/
			onBackdropClick: PropTypes.func,
			/**
			* 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,
			/**
			* @ignore
			*/
			onKeyDown: PropTypes.func,
			/**
			* If `true`, the component is shown.
			*/
			open: PropTypes.bool.isRequired,
			/**
			* The props used for each slot inside the Modal.
			* @default {}
			*/
			slotProps: PropTypes.shape({
			backdrop: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
			root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
			}),
			/**
			* The components used for each slot inside the Modal.
			* Either a string to use a HTML element or a component.
			* @default {}
			*/
			slots: PropTypes.shape({
			backdrop: PropTypes.elementType,
			root: PropTypes.elementType
			})
			} : void 0;
			export default ModalUnstyled;