UNPKG

@mui/base

Version:

A library of headless ('unstyled') React UI components and low-level hooks.

371 lines (365 loc) 12.7 kB
import _extends from "@babel/runtime/helpers/esm/extends"; import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose"; const _excluded = ["children", "closeAfterTransition", "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 './modalClasses'; import { useSlotProps } from '../utils'; import { useClassNamesOverride } from '../utils/ClassNameConfigurator'; import { jsx as _jsx } from "react/jsx-runtime"; import { jsxs as _jsxs } from "react/jsx-runtime"; const useUtilityClasses = ownerState => { const { open, exited } = ownerState; const slots = { root: ['root', !open && exited && 'hidden'], backdrop: ['backdrop'] }; return composeClasses(slots, useClassNamesOverride(getModalUtilityClass)); }; 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: * * - [Modal](https://mui.com/base/react-modal/) * * API: * * - [Modal API](https://mui.com/base/react-modal/components-api/#modal) */ const Modal = /*#__PURE__*/React.forwardRef(function Modal(props, forwardedRef) { const { children, closeAfterTransition = false, container, disableAutoFocus = false, disableEnforceFocus = false, disableEscapeKeyDown = false, disablePortal = false, disableRestoreFocus = false, disableScrollLock = false, hideBackdrop = false, keepMounted = false, // private manager: managerProp = defaultManager, onBackdropClick, onClose, onKeyDown, open, onTransitionEnter, onTransitionExited, slotProps = {}, slots = {} } = props, other = _objectWithoutPropertiesLoose(props, _excluded); // TODO: `modal`` must change its type in this file to match the type of methods // provided by `ModalManager` const manager = managerProp; 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['aria-hidden'] ?? 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, { 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 = slots.root ?? '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 Base UI 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" ? Modal.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, /** * When set to true the Modal waits until a nested Transition is completed before closing. * @default false */ closeAfterTransition: PropTypes.bool, /** * 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, /** * 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 Modal;