@dnanpm/styleguide/build/cjs/components/Overlay/Overlay.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var reactDom = require('react-dom');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

const Element = styledComponents.styled.div `
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
    animation: fadeIn 0.2s ease-in-out;

    @keyframes fadeIn {
        0% {
            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T0};
        }

        100% {
            background-color: ${theme.default.color.background.plum.default}${theme.default.color.transparency.T40};
        }
    }
`;
/** @visibleName Overlay */
const Overlay = (_a) => {
    var { portalContainer: portalContainerSelector = 'body', appElement: appElementSelector = '#__next', preventBodyScroll = true, 'data-testid': dataTestId, as = 'section', role, isFocusTrapped = true } = _a, props = tslib.__rest(_a, ["portalContainer", "appElement", "preventBodyScroll", 'data-testid', "as", "role", "isFocusTrapped"]);
    const contentRef = React.useRef(null);
    const portalContainer = portalContainerSelector
        ? document.querySelector(portalContainerSelector)
        : null;
    const appElement = document.querySelector(appElementSelector);
    const overlayElement = (React__default.default.createElement(Element, { id: props.id, onClick: props.onClick, className: props.className, "data-testid": dataTestId, onKeyDown: props.onKeyDown, "aria-label": props.ariaLabel, as: as, role: as === 'div' ? role : undefined },
        React__default.default.createElement("div", { ref: contentRef, tabIndex: -1, "data-testid": dataTestId ? `${dataTestId}-content` : '' }, props.children)));
    React.useEffect(() => {
        if (preventBodyScroll) {
            document.body.style.setProperty('overflow', 'hidden');
            document.body.style.setProperty('position', 'relative');
            document.body.style.setProperty('top', '0');
            document.body.style.setProperty('left', '0');
            return () => {
                document.body.style.removeProperty('overflow');
            };
        }
        return undefined;
    }, [preventBodyScroll]);
    React.useEffect(() => {
        var _a;
        if (appElement) {
            const focusTrapStart = document.createElement('div');
            focusTrapStart.setAttribute('tabindex', isFocusTrapped ? '0' : '-1');
            focusTrapStart.addEventListener('focus', () => {
                var _a;
                (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            });
            const focusTrapEnd = focusTrapStart.cloneNode();
            focusTrapEnd.addEventListener('focus', () => {
                var _a;
                (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            });
            (_a = contentRef === null || contentRef === void 0 ? void 0 : contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
            document.body.prepend(focusTrapStart);
            document.body.append(focusTrapEnd);
            appElement.setAttribute('inert', 'true');
            return () => {
                document.body.removeChild(focusTrapStart);
                document.body.removeChild(focusTrapEnd);
                appElement.removeAttribute('inert');
            };
        }
        return undefined;
    }, [appElement, contentRef, isFocusTrapped]);
    return portalContainerSelector === false
        ? overlayElement
        : reactDom.createPortal(overlayElement, portalContainer !== null && portalContainer !== void 0 ? portalContainer : document.body);
};

exports.default = Overlay;