@mui/base
Version:
A library of headless ('unstyled') React UI components and low-level hooks.
381 lines (374 loc) • 14.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var React = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("@mui/utils");
var _composeClasses = _interopRequireDefault(require("../composeClasses"));
var _Portal = _interopRequireDefault(require("../Portal"));
var _ModalManager = _interopRequireWildcard(require("./ModalManager"));
var _FocusTrap = _interopRequireDefault(require("../FocusTrap"));
var _modalClasses = require("./modalClasses");
var _utils2 = require("../utils");
var _ClassNameConfigurator = require("../utils/ClassNameConfigurator");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["children", "closeAfterTransition", "container", "disableAutoFocus", "disableEnforceFocus", "disableEscapeKeyDown", "disablePortal", "disableRestoreFocus", "disableScrollLock", "hideBackdrop", "keepMounted", "manager", "onBackdropClick", "onClose", "onKeyDown", "open", "onTransitionEnter", "onTransitionExited", "slotProps", "slots"];
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const useUtilityClasses = ownerState => {
const {
open,
exited
} = ownerState;
const slots = {
root: ['root', !open && exited && 'hidden'],
backdrop: ['backdrop']
};
return (0, _composeClasses.default)(slots, (0, _ClassNameConfigurator.useClassNamesOverride)(_modalClasses.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.default();
/**
* 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) {
var _props$ariaHidden, _slots$root;
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 = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _utils.unstable_useForkRef)(modalRef, forwardedRef);
const hasTransition = getHasTransition(children);
const ariaHiddenProp = (_props$ariaHidden = props['aria-hidden']) != null ? _props$ariaHidden : true;
const getDoc = () => (0, _utils.unstable_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 = (0, _utils.unstable_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 = (0, _utils.unstable_useEventCallback)(node => {
mountNodeRef.current = node;
if (!node || !modalRef.current) {
return;
}
if (open && isTopModal()) {
handleMounted();
} else {
(0, _ModalManager.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 = (0, _extends2.default)({}, 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 = (0, _utils.unstable_createChainedFunction)(handleEnter, children.props.onEnter);
childProps.onExited = (0, _utils.unstable_createChainedFunction)(handleExited, children.props.onExited);
}
const Root = (_slots$root = slots.root) != null ? _slots$root : 'div';
const rootProps = (0, _utils2.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 = (0, _utils2.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__*/(0, _jsxRuntime.jsx)(_Portal.default
// @ts-expect-error TODO: include ref to Base UI Portal props
, {
ref: handlePortalRef,
container: container,
disablePortal: disablePortal,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Root, (0, _extends2.default)({}, rootProps, {
children: [!hideBackdrop && BackdropComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(BackdropComponent, (0, _extends2.default)({}, backdropProps)) : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_FocusTrap.default, {
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: _utils.elementAcceptingRef.isRequired,
/**
* When set to true the Modal waits until a nested Transition is completed before closing.
* @default false
*/
closeAfterTransition: _propTypes.default.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.default /* @typescript-to-proptypes-ignore */.oneOfType([_utils.HTMLElementType, _propTypes.default.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.default.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.default.bool,
/**
* If `true`, hitting escape will not fire the `onClose` callback.
* @default false
*/
disableEscapeKeyDown: _propTypes.default.bool,
/**
* The `children` will be under the DOM hierarchy of the parent component.
* @default false
*/
disablePortal: _propTypes.default.bool,
/**
* If `true`, the modal will not restore focus to previously focused element once
* modal is hidden or unmounted.
* @default false
*/
disableRestoreFocus: _propTypes.default.bool,
/**
* Disable the scroll lock behavior.
* @default false
*/
disableScrollLock: _propTypes.default.bool,
/**
* If `true`, the backdrop is not rendered.
* @default false
*/
hideBackdrop: _propTypes.default.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.default.bool,
/**
* Callback fired when the backdrop is clicked.
* @deprecated Use the `onClose` prop with the `reason` argument to handle the `backdropClick` events.
*/
onBackdropClick: _propTypes.default.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.default.func,
/**
* If `true`, the component is shown.
*/
open: _propTypes.default.bool.isRequired,
/**
* The props used for each slot inside the Modal.
* @default {}
*/
slotProps: _propTypes.default.shape({
backdrop: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]),
root: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
}),
/**
* The components used for each slot inside the Modal.
* Either a string to use a HTML element or a component.
* @default {}
*/
slots: _propTypes.default.shape({
backdrop: _propTypes.default.elementType,
root: _propTypes.default.elementType
})
} : void 0;
var _default = Modal;
exports.default = _default;