Page MenuHomec4science
Files F100955942

ModalUnstyled.js
No OneTemporary
Actions

File Metadata

Created
Tue, Feb 4, 07:07

ModalUnstyled.js
View Options

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
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";
var useUtilityClasses = function useUtilityClasses(ownerState) {
var open = ownerState.open,
exited = ownerState.exited,
classes = ownerState.classes;
var 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.
var 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/)
*/
var ModalUnstyled = /*#__PURE__*/React.forwardRef(function ModalUnstyled(props, forwardedRef) {
var _props$ariaHidden, _ref;
var children = props.children,
classesProp = props.classes,
_props$closeAfterTran = props.closeAfterTransition,
closeAfterTransition = _props$closeAfterTran === void 0 ? false : _props$closeAfterTran,
component = props.component,
container = props.container,
_props$disableAutoFoc = props.disableAutoFocus,
disableAutoFocus = _props$disableAutoFoc === void 0 ? false : _props$disableAutoFoc,
_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,
onKeyDown = props.onKeyDown,
open = props.open,
onTransitionEnter = props.onTransitionEnter,
onTransitionExited = props.onTransitionExited,
_props$slotProps = props.slotProps,
slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
_props$slots = props.slots,
slots = _props$slots === void 0 ? {} : _props$slots,
other = _objectWithoutProperties(props, ["children", "classes", "closeAfterTransition", "component", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"]);
var _React$useState = React.useState(!open),
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, forwardedRef);
var hasTransition = getHasTransition(children);
var ariaHiddenProp = (_props$ariaHidden = props['aria-hidden']) != null ? _props$ariaHidden : true;
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.
if (modalRef.current) {
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 || !modalRef.current) {
return;
}
if (open && isTopModal()) {
handleMounted();
} else {
ariaHidden(modalRef.current, ariaHiddenProp);
}
});
var handleClose = React.useCallback(function () {
manager.remove(getModal(), ariaHiddenProp);
}, [manager, ariaHiddenProp]);
React.useEffect(function () {
return function () {
handleClose();
};
}, [handleClose]);
React.useEffect(function () {
if (open) {
handleOpen();
} else if (!hasTransition || !closeAfterTransition) {
handleClose();
}
}, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]);
var ownerState = _extends({}, props, {
classes: classesProp,
closeAfterTransition: closeAfterTransition,
disableAutoFocus: disableAutoFocus,
disableEnforceFocus: disableEnforceFocus,
disableEscapeKeyDown: disableEscapeKeyDown,
disablePortal: disablePortal,
disableRestoreFocus: disableRestoreFocus,
disableScrollLock: disableScrollLock,
exited: exited,
hideBackdrop: hideBackdrop,
keepMounted: keepMounted
});
var classes = useUtilityClasses(ownerState);
var handleEnter = function handleEnter() {
setExited(false);
if (onTransitionEnter) {
onTransitionEnter();
}
};
var handleExited = function handleExited() {
setExited(true);
if (onTransitionExited) {
onTransitionExited();
}
if (closeAfterTransition) {
handleClose();
}
};
var handleBackdropClick = function handleBackdropClick(event) {
if (event.target !== event.currentTarget) {
return;
}
if (onBackdropClick) {
onBackdropClick(event);
}
if (onClose) {
onClose(event, 'backdropClick');
}
};
var handleKeyDown = function 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');
}
}
};
var 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);
}
var Root = (_ref = component != null ? component : slots.root) != null ? _ref : 'div';
var rootProps = useSlotProps({
elementType: Root,
externalSlotProps: slotProps.root,
externalForwardedProps: other,
additionalProps: {
ref: handleRef,
role: 'presentation',
onKeyDown: handleKeyDown
},
className: classes.root,
ownerState: ownerState
});
var BackdropComponent = slots.backdrop;
var backdropProps = useSlotProps({
elementType: BackdropComponent,
externalSlotProps: slotProps.backdrop,
additionalProps: {
'aria-hidden': true,
onClick: handleBackdropClick,
open: open
},
className: classes.backdrop,
ownerState: 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