Page MenuHomec4science
Files F101371890

ModalUnstyled.js
No OneTemporary
Actions

File Metadata

Created
Sun, Feb 9, 19:14

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;

Event Timeline

c4science · Help