"use strict"; 'use client'; var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault"); Object.defineProperty(exports, "__esModule", { value: true }); exports.useModal = useModal; var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")); var React = _interopRequireWildcard(require("react")); var _utils = require("@mui/utils"); var _utils2 = require("../utils"); var _ModalManager = require("./ModalManager"); function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); } function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; } 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.ModalManager(); /** * * Demos: * * - [Modal](https://mui.com/base-ui/react-modal/#hook) * * API: * * - [useModal API](https://mui.com/base-ui/react-modal/hooks-api/#use-modal) */ function useModal(parameters) { const { container, disableEscapeKeyDown = false, disableScrollLock = false, // @ts-ignore internal logic - Base UI supports the manager as a prop too manager = defaultManager, closeAfterTransition = false, onTransitionEnter, onTransitionExited, children, onClose, open, rootRef } = parameters; // @ts-ignore internal logic const modal = React.useRef({}); const mountNodeRef = React.useRef(null); const modalRef = React.useRef(null); const handleRef = (0, _utils.unstable_useForkRef)(modalRef, rootRef); const [exited, setExited] = React.useState(!open); const hasTransition = getHasTransition(children); let ariaHiddenProp = true; if (parameters['aria-hidden'] === 'false' || parameters['aria-hidden'] === false) { ariaHiddenProp = false; } const getDoc = () => (0, _utils.unstable_ownerDocument)(mountNodeRef.current); const getModal = () => { modal.current.modalRef = modalRef.current; modal.current.mount = 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) { return; } if (open && isTopModal()) { handleMounted(); } else if (modalRef.current) { (0, _ModalManager.ariaHidden)(modalRef.current, ariaHiddenProp); } }); const handleClose = React.useCallback(() => { manager.remove(getModal(), ariaHiddenProp); }, [ariaHiddenProp, manager]); React.useEffect(() => { return () => { handleClose(); }; }, [handleClose]); React.useEffect(() => { if (open) { handleOpen(); } else if (!hasTransition || !closeAfterTransition) { handleClose(); } }, [open, handleClose, hasTransition, closeAfterTransition, handleOpen]); const createHandleKeyDown = otherHandlers => event => { var _otherHandlers$onKeyD; (_otherHandlers$onKeyD = otherHandlers.onKeyDown) == null || _otherHandlers$onKeyD.call(otherHandlers, 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' || event.which === 229 || // Wait until IME is settled. !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 createHandleBackdropClick = otherHandlers => event => { var _otherHandlers$onClic; (_otherHandlers$onClic = otherHandlers.onClick) == null || _otherHandlers$onClic.call(otherHandlers, event); if (event.target !== event.currentTarget) { return; } if (onClose) { onClose(event, 'backdropClick'); } }; const getRootProps = (otherHandlers = {}) => { const propsEventHandlers = (0, _utils2.extractEventHandlers)(parameters); // The custom event handlers shouldn't be spread on the root element delete propsEventHandlers.onTransitionEnter; delete propsEventHandlers.onTransitionExited; const externalEventHandlers = (0, _extends2.default)({}, propsEventHandlers, otherHandlers); return (0, _extends2.default)({ role: 'presentation' }, externalEventHandlers, { onKeyDown: createHandleKeyDown(externalEventHandlers), ref: handleRef }); }; const getBackdropProps = (otherHandlers = {}) => { const externalEventHandlers = otherHandlers; return (0, _extends2.default)({ 'aria-hidden': true }, externalEventHandlers, { onClick: createHandleBackdropClick(externalEventHandlers), open }); }; const getTransitionProps = () => { const handleEnter = () => { setExited(false); if (onTransitionEnter) { onTransitionEnter(); } }; const handleExited = () => { setExited(true); if (onTransitionExited) { onTransitionExited(); } if (closeAfterTransition) { handleClose(); } }; return { onEnter: (0, _utils.unstable_createChainedFunction)(handleEnter, children == null ? void 0 : children.props.onEnter), onExited: (0, _utils.unstable_createChainedFunction)(handleExited, children == null ? void 0 : children.props.onExited) }; }; return { getRootProps, getBackdropProps, getTransitionProps, rootRef: handleRef, portalRef: handlePortalRef, isTopModal, exited, hasTransition }; }