@adaptabletools/adaptable/src/components/Modal/index.js

Powerful AG Grid extension which provides advanced, cutting-edge functionality to meet all DataGrid requirements

import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
import { createPortal } from 'react-dom';
import { useMemo } from 'react';
import { RemoveScroll } from 'react-remove-scroll';
import { cn } from '../../lib/utils';
import { baseClassName, default as Backdrop } from './Backdrop';
import { createUuid } from '../utils/uuid';
import { isBrowserDocumentAvailable } from '../../View/UIHelper';
import { useStacking } from '../WindowModal/useStacking';
import { Flex } from '../Flex';
let portalElement;
let loadingScreenPortalElement;
export const ensurePortalElement = () => {
    if (!isBrowserDocumentAvailable()) {
        return null;
    }
    if (portalElement) {
        return portalElement;
    }
    portalElement = document.createElement('div');
    document.body.appendChild(portalElement);
    return portalElement;
};
export const ensureLoadingScreenPortalElement = () => {
    if (!isBrowserDocumentAvailable()) {
        return null;
    }
    if (loadingScreenPortalElement) {
        return loadingScreenPortalElement;
    }
    loadingScreenPortalElement = document.createElement('div');
    document.body.appendChild(loadingScreenPortalElement);
    return loadingScreenPortalElement;
};
let globalCounter = 0;
export const Modal = (props) => {
    ensurePortalElement();
    const { className, style, children, isOpen, onBringToFront, ...boxProps } = props;
    const uuid = useMemo(() => createUuid(), []);
    const counter = useMemo(() => globalCounter++, [isOpen]);
    const openTimestamp = counter;
    const backdropZIndexOffset = 1;
    const stacking = useStacking();
    const zIndex = stacking.zIndex;
    return createPortal(isOpen ? (_jsxs(_Fragment, { children: [_jsx(Backdrop, { timestamp: openTimestamp, uuid: uuid, zIndex: zIndex - backdropZIndexOffset, onBringToFront: onBringToFront }), _jsx(RemoveScroll, { children: _jsx(Flex, { alignItems: "center", justifyContent: "center", flexDirection: "column", ...boxProps, style: { zIndex, ...style }, className: cn('twa:fixed twa:inset-0 twa:z-1000 twa:font-(family-name:--ab__font-family)', baseClassName, className), children: children }) })] })) : null, portalElement);
};