import { unstable_ownerWindow as ownerWindow, unstable_ownerDocument as ownerDocument, unstable_getScrollbarSize as getScrollbarSize } from '@mui/utils'; // Is a vertical scrollbar displayed? function isOverflowing(container) { const doc = ownerDocument(container); if (doc.body === container) { return ownerWindow(container).innerWidth > doc.documentElement.clientWidth; } return container.scrollHeight > container.clientHeight; } export function ariaHidden(element, show) { if (show) { element.setAttribute('aria-hidden', 'true'); } else { element.removeAttribute('aria-hidden'); } } function getPaddingRight(element) { return parseInt(ownerWindow(element).getComputedStyle(element).paddingRight, 10) || 0; } function isAriaHiddenForbiddenOnElement(element) { // The forbidden HTML tags are the ones from ARIA specification that // can be children of body and can't have aria-hidden attribute. // cf. https://www.w3.org/TR/html-aria/#docconformance const forbiddenTagNames = ['TEMPLATE', 'SCRIPT', 'STYLE', 'LINK', 'MAP', 'META', 'NOSCRIPT', 'PICTURE', 'COL', 'COLGROUP', 'PARAM', 'SLOT', 'SOURCE', 'TRACK']; const isForbiddenTagName = forbiddenTagNames.indexOf(element.tagName) !== -1; const isInputHidden = element.tagName === 'INPUT' && element.getAttribute('type') === 'hidden'; return isForbiddenTagName || isInputHidden; } function ariaHiddenSiblings(container, mountElement, currentElement, elementsToExclude, show) { const blacklist = [mountElement, currentElement, ...elementsToExclude]; [].forEach.call(container.children, element => { const isNotExcludedElement = blacklist.indexOf(element) === -1; const isNotForbiddenElement = !isAriaHiddenForbiddenOnElement(element); if (isNotExcludedElement && isNotForbiddenElement) { ariaHidden(element, show); } }); } function findIndexOf(items, callback) { let idx = -1; items.some((item, index) => { if (callback(item)) { idx = index; return true; } return false; }); return idx; } function handleContainer(containerInfo, props) { const restoreStyle = []; const container = containerInfo.container; if (!props.disableScrollLock) { if (isOverflowing(container)) { // Compute the size before applying overflow hidden to avoid any scroll jumps. const scrollbarSize = getScrollbarSize(ownerDocument(container)); restoreStyle.push({ value: container.style.paddingRight, property: 'padding-right', el: container }); // Use computed style, here to get the real padding to add our scrollbar width. container.style.paddingRight = `${getPaddingRight(container) + scrollbarSize}px`; // .mui-fixed is a global helper. const fixedElements = ownerDocument(container).querySelectorAll('.mui-fixed'); [].forEach.call(fixedElements, element => { restoreStyle.push({ value: element.style.paddingRight, property: 'padding-right', el: element }); element.style.paddingRight = `${getPaddingRight(element) + scrollbarSize}px`; }); } let scrollContainer; if (container.parentNode instanceof DocumentFragment) { scrollContainer = ownerDocument(container).body; } else { // Support html overflow-y: auto for scroll stability between pages // https://css-tricks.com/snippets/css/force-vertical-scrollbar/ const parent = container.parentElement; const containerWindow = ownerWindow(container); scrollContainer = parent?.nodeName === 'HTML' && containerWindow.getComputedStyle(parent).overflowY === 'scroll' ? parent : container; } // Block the scroll even if no scrollbar is visible to account for mobile keyboard // screensize shrink. restoreStyle.push({ value: scrollContainer.style.overflow, property: 'overflow', el: scrollContainer }, { value: scrollContainer.style.overflowX, property: 'overflow-x', el: scrollContainer }, { value: scrollContainer.style.overflowY, property: 'overflow-y', el: scrollContainer }); scrollContainer.style.overflow = 'hidden'; } const restore = () => { restoreStyle.forEach(({ value, el, property }) => { if (value) { el.style.setProperty(property, value); } else { el.style.removeProperty(property); } }); }; return restore; } function getHiddenSiblings(container) { const hiddenSiblings = []; [].forEach.call(container.children, element => { if (element.getAttribute('aria-hidden') === 'true') { hiddenSiblings.push(element); } }); return hiddenSiblings; } /** * @ignore - do not document. * * Proper state management for containers and the modals in those containers. * Simplified, but inspired by react-overlay's ModalManager class. * Used by the Modal to ensure proper styling of containers. */ export class ModalManager { constructor() { this.containers = void 0; this.modals = void 0; this.modals = []; this.containers = []; } add(modal, container) { let modalIndex = this.modals.indexOf(modal); if (modalIndex !== -1) { return modalIndex; } modalIndex = this.modals.length; this.modals.push(modal); // If the modal we are adding is already in the DOM. if (modal.modalRef) { ariaHidden(modal.modalRef, false); } const hiddenSiblings = getHiddenSiblings(container); ariaHiddenSiblings(container, modal.mount, modal.modalRef, hiddenSiblings, true); const containerIndex = findIndexOf(this.containers, item => item.container === container); if (containerIndex !== -1) { this.containers[containerIndex].modals.push(modal); return modalIndex; } this.containers.push({ modals: [modal], container, restore: null, hiddenSiblings }); return modalIndex; } mount(modal, props) { const containerIndex = findIndexOf(this.containers, item => item.modals.indexOf(modal) !== -1); const containerInfo = this.containers[containerIndex]; if (!containerInfo.restore) { containerInfo.restore = handleContainer(containerInfo, props); } } remove(modal, ariaHiddenState = true) { const modalIndex = this.modals.indexOf(modal); if (modalIndex === -1) { return modalIndex; } const containerIndex = findIndexOf(this.containers, item => item.modals.indexOf(modal) !== -1); const containerInfo = this.containers[containerIndex]; containerInfo.modals.splice(containerInfo.modals.indexOf(modal), 1); this.modals.splice(modalIndex, 1); // If that was the last modal in a container, clean up the container. if (containerInfo.modals.length === 0) { // The modal might be closed before it had the chance to be mounted in the DOM. if (containerInfo.restore) { containerInfo.restore(); } if (modal.modalRef) { // In case the modal wasn't in the DOM yet. ariaHidden(modal.modalRef, ariaHiddenState); } ariaHiddenSiblings(containerInfo.container, modal.mount, modal.modalRef, containerInfo.hiddenSiblings, false); this.containers.splice(containerIndex, 1); } else { // Otherwise make sure the next top modal is visible to a screen reader. const nextTop = containerInfo.modals[containerInfo.modals.length - 1]; // as soon as a modal is adding its modalRef is undefined. it can't set // aria-hidden because the dom element doesn't exist either // when modal was unmounted before modalRef gets null if (nextTop.modalRef) { ariaHidden(nextTop.modalRef, false); } } return modalIndex; } isTopModal(modal) { return this.modals.length > 0 && this.modals[this.modals.length - 1] === modal; } }