@dnanpm/styleguide/build/cjs/components/Modal/Modal.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 ReactModal = require('react-modal');
var icons = require('@dnanpm/icons');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var styledUtils = require('../../utils/styledUtils.js');
var Box = require('../Box/Box.js');
var ButtonClose = require('../ButtonClose/ButtonClose.js');

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

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

const sizeMap = {
    mobile: '375px',
    small: '480px',
    medium: '768px',
    large: '960px',
    wide: '1535px',
};
const GlobalStyle = styledComponents.createGlobalStyle `
    body.ReactModal__Body--open {
        overflow: hidden;
    }
`;
const StyledReactModal = styledComponents.styled(ReactModal__default.default) `
    position: relative;
    max-width: 100vw;
    width: 100vw;
    max-height: 100vh;
    height: 100vh;
    overflow-y: auto;

    @media (min-width: ${sizeMap.mobile}) {
        max-width: ${({ size }) => sizeMap[size]};
        max-height: 90%;
        margin: 0 ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
    }

    @media (min-width: ${sizeMap.small}) {
        width: 90vw;
        max-height: 60%;
    }

    @media (min-width: ${sizeMap.wide}) {
        max-width: 100%;
        width: 960px;
    }
`;
const StyledOverlay = styledComponents.styled.div `
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    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};
        }
    }
`;
const StyledBox = styledComponents.styled(Box.default) `
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0;
    border: none;
    overflow-y: auto;

    @media (max-width: ${sizeMap.mobile}) {
        border-radius: 0;
    }
`;
const StyledContent = styledComponents.styled.div `
    &:focus {
        outline: none;
    }

    @media (min-width: ${sizeMap.small}) {
        border-radius: ${theme.default.radius.default};
    }
`;
const ContentWrapper = styledComponents.styled.div `
    padding-top: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1)};
    padding-left: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
    padding-bottom: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
    padding-right: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
`;
const Header = styledComponents.styled.div `
    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
    background-color: ${({ $variant }) => $variant === 'dark'
    ? theme.default.color.background.plum.E02
    : theme.default.color.background.white.default};
    width: 100%;

    h2,
    p {
        margin: 0;
    }
`;
const Title = styledComponents.styled.h2 `
    font-size: ${theme.default.fontSize.h2M};
    line-height: ${theme.default.lineHeight.h2M};
    color: ${({ $variant }) => $variant === 'light' ? theme.default.color.default.black : theme.default.color.default.white};

    @media (max-width: ${sizeMap.small}) {
        font-size: ${theme.default.fontSize.h2S};
        line-height: ${theme.default.lineHeight.h2S};
    }
`;
const CloseButton = styledComponents.styled(ButtonClose.default) `
    margin: 0;
    padding: 0.5rem;
    border-radius: 0 ${theme.default.radius.default} 0 ${theme.default.radius.default};
    background-color: ${({ $variant }) => $variant === 'light'
    ? theme.default.color.background.sand.E01
    : theme.default.color.background.plum.default};
    @media (max-width: ${sizeMap.mobile}) {
        border-radius: 0 0 0 ${theme.default.radius.default};
    }
`;
const Footer = styledComponents.styled.div `
    position: sticky;
    bottom: 0;
    width: 100%;
    margin-top: auto;
    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 2)};
    background-color: ${theme.default.color.background.white.default};
`;
const ModalOverlay = ({ ref, onClick, onMouseDown, className }, contentElement) => (React__default.default.createElement(StyledOverlay, { ref: ref, onClick: onClick, onMouseDown: onMouseDown, className: className }, contentElement));
const ModalContent = (_a, children) => {
    var { ref, tabIndex, role, onKeyDown, onMouseDown, onMouseUp, onClick, className } = _a, contentProps = tslib.__rest(_a, ["ref", "tabIndex", "role", "onKeyDown", "onMouseDown", "onMouseUp", "onClick", "className"]);
    return (React__default.default.createElement(StyledContent, { ref: ref, tabIndex: tabIndex, role: role, onKeyDown: onKeyDown, onMouseDown: onMouseDown, onMouseUp: onMouseUp, onClick: onClick, "aria-label": contentProps['aria-label'], "aria-modal": contentProps['aria-modal'], className: className }, children));
};
const Modal = (_a) => {
    var { appElement = '#__next', size = 'medium', variant = 'light', closeButton = true, isClosable = true, 'data-testid': dataTestId } = _a, props = tslib.__rest(_a, ["appElement", "size", "variant", "closeButton", "isClosable", 'data-testid']);
    ReactModal__default.default.setAppElement(appElement);
    return (React__default.default.createElement(React__default.default.Fragment, null,
        React__default.default.createElement(StyledReactModal, { id: props.id, size: size, isOpen: props.isOpen, overlayElement: ModalOverlay, contentElement: ModalContent, onRequestClose: props.onRequestClose, portalClassName: props.className, contentLabel: props.contentLabel, shouldCloseOnEsc: isClosable, shouldCloseOnOverlayClick: isClosable },
            React__default.default.createElement(StyledBox, { elevation: "extraHigh", "data-testid": dataTestId },
                closeButton && isClosable && (React__default.default.createElement(CloseButton, { onClick: props.onRequestClose, "aria-label": props.closeLabel, "data-testid": dataTestId && `${dataTestId}-close-button`, "$variant": variant },
                    React__default.default.createElement(icons.Close, { color: variant === 'light'
                            ? theme.default.color.default.plum
                            : theme.default.color.default.white }))),
                React__default.default.createElement(Header, { "$variant": variant, "data-testid": dataTestId && `${dataTestId}-header` }, props.title && (React__default.default.createElement(Title, { "$size": size, "$variant": variant }, props.title))),
                React__default.default.createElement(ContentWrapper, null, props.children),
                props.footer && (React__default.default.createElement(Footer, { "data-testid": dataTestId && `${dataTestId}-footer` }, props.footer)))),
        React__default.default.createElement(GlobalStyle, null)));
};

exports.default = Modal;