@vimeo/iris/components/Modal/Modal.js

Vimeo Design System

'use strict';

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

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var React = require('react');
var components_Modal_Modal_style = require('./Modal.style.js');
var components_Modal_Modal_minors = require('./Modal.minors.js');
var themes_index = require('../../themes/index.js');
var utils_HOCs_withIris = require('../../utils/HOCs/withIris.js');
var utils_hooks_usePortal_DEPRECATED_usePortal_DEPRECATED = require('../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.js');
var icons_ui_DismissX = require('../../icons/ui/DismissX.js');
require('styled-components');
require('polished');
require('../Button/Button.js');
require('../Button/Button.style.js');
require('../Button/Button.config.js');
require('../Button/FeaturedIcon.js');
require('../../color/colors.js');
require('../../tokens/core.js');
require('../../tokens/color/index.js');
require('../../tokens/color/background/background.js');
require('../../tokens/util/readToken.js');
require('../../tokens/util/clamp.js');
require('../../tokens/color/format/format.js');
require('../../tokens/color/format/primary.js');
require('../../tokens/color/format/secondary.js');
require('../../tokens/color/format/tertiary.js');
require('../../tokens/color/rainbow/rainbow.js');
require('../../tokens/color/rainbow/conic/index.js');
require('../../tokens/color/rainbow/conic/sm.js');
require('../../tokens/color/rainbow/conic/xl.js');
require('../../tokens/color/rainbow/linear/index.js');
require('../../tokens/color/rainbow/linear/sm.js');
require('../../tokens/color/rainbow/linear/xl.js');
require('../../tokens/color/livestream/livestream.js');
require('../../tokens/color/status/status.js');
require('../../tokens/color/status/caution.js');
require('../../tokens/color/status/negative.js');
require('../../tokens/color/status/positive.js');
require('../../tokens/color/stroke/stroke.js');
require('../../tokens/color/surface/surface.js');
require('../../tokens/color/text/text.js');
require('../../tokens/util/round.js');
require('../../tokens/color/upsell/upsell.js');
require('../../tokens/color/upsell/sm.js');
require('../../tokens/color/upsell/xl.js');
require('../../tokens/color/upsell/new.js');
require('../../tokens/edge/edge.js');
require('../../tokens/space/space.js');
require('../../tokens/typography/index.js');
require('../../tokens/typography/size/size.js');
require('../LoaderCircular/LoaderCircular.js');
require('../LoaderCircular/LoaderCircular.style.js');
require('../../utils/hooks/useDeprecate.js');
require('../../utils/general/mergeReactRefs.js');
require('../../utils/css.js');
require('../../typography/Header/Header.js');
require('../../typography/Header/Header.style.js');
require('../../typography/typography.js');
require('../../typography/Text/Text.js');
require('../../typography/Text/Text.style.js');
require('../../typography/Text/EditableText.js');
require('../../utils/hooks/useLayoutStyles.js');
require('../../utils/DOM/geometry.js');
require('react-dom');
require('../../utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.style.js');
require('../../utils/hooks/usePortal_DEPRECATED/useMountAnimations.js');
require('../../utils/hooks/useIsomorphicEffect.js');
require('../../utils/DOM/getComputedStyles.js');
require('../../utils/DOM/animate.js');
require('../../utils/events/onEvent.js');
require('../../utils/hooks/usePortal_DEPRECATED/coordinates.js');
require('../../utils/hooks/usePortal_DEPRECATED/Anchor.js');
require('../../utils/hooks/useOutsideClick.js');
require('../../utils/DOM/SSR.js');
require('../../utils/DOM/createPortalOutlet.js');
require('../../utils/DOM/createElement.js');

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

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

var Modal = utils_HOCs_withIris.withIris(ModalComponent);
Modal.Header = components_Modal_Modal_minors.Header;
Modal.Footer = components_Modal_Modal_minors.Footer;
Modal.PrimaryAction = components_Modal_Modal_minors.PrimaryAction;
Modal.SecondaryAction = components_Modal_Modal_minors.SecondaryAction;
var animation = {
    enter: {
        opacity: 1,
        transform: 'translateY(0)',
    },
    exit: {
        opacity: 0,
        transform: "translateY(-15%)",
    },
};
function ModalComponent(_a) {
    var active = _a.active, children = _a.children, content = _a.content, dismissLabel = _a.dismissLabel, feature = _a.feature, forwardRef = _a.forwardRef, onClose = _a.onClose, onOpen = _a.onOpen, _b = _a.screen, screen = _b === void 0 ? true : _b, props = tslib_es6.__rest(_a, ["active", "children", "content", "dismissLabel", "feature", "forwardRef", "onClose", "onOpen", "screen"]);
    var attach = feature
        ? [
            [97, 97],
            [100, 100],
        ]
        : [
            [50, 50],
            [50, 50],
        ];
    var allowPageInteraction = feature && !screen;
    var anchorToWindow = true;
    var _c = tslib_es6.__read(utils_hooks_usePortal_DEPRECATED_usePortal_DEPRECATED.usePortal_DEPRECATED(React__default["default"].createElement(components_Modal_Modal_style.Modal, tslib_es6.__assign({ ref: forwardRef }, props),
        React__default["default"].createElement(React__default["default"].Fragment, null,
            feature && (React__default["default"].createElement(components_Modal_Modal_style.Dismiss, { icon: React__default["default"].createElement(icons_ui_DismissX.DismissX, null), size: "sm", variant: "minimalTransparent", format: "basic", theme: themes_index.themes.dark, title: dismissLabel, onClick: function (event) { return anchor.onClick(event); } })),
            React__default["default"].createElement(ModalContent, null, content))), {
        allowPageInteraction: allowPageInteraction,
        anchorToWindow: anchorToWindow,
        animation: animation,
        attach: attach,
        forceActive: active,
        onClose: onClose,
        onOpen: onOpen,
        screen: screen,
    }), 2), Modal = _c[0], anchor = _c[1];
    return (React__default["default"].createElement(React__default["default"].Fragment, null,
        Modal && (React__default["default"].createElement(components_Modal_Modal_minors.Controls.Provider, { value: { close: anchor.onClick } }, Modal)),
        children && React.cloneElement(children, anchor)));
}
function ModalContent(_a) {
    var children = _a.children;
    var ref = React.useRef(null);
    // If focus leaves the modal, reset focus to the first
    // element of the modal. This ensure that so long as
    // the modal is active, elements outside the modal cannot
    // be focused.
    // We are allowing focus inside open Iris portals in case a portal is triggered from the ModalContent.
    React.useLayoutEffect(function () {
        var addEventListener = document.addEventListener, removeEventListener = document.removeEventListener;
        var firstFocusable = ref.current.querySelectorAll(focusable)[0];
        function captureFocus(_a) {
            var _b, _c;
            var target = _a.target;
            var focusOutOfModal = !((_b = ref.current) === null || _b === void 0 ? void 0 : _b.contains(target)) &&
                !((_c = document.getElementById('iris-portals')) === null || _c === void 0 ? void 0 : _c.contains(target));
            if (focusOutOfModal)
                firstFocusable === null || firstFocusable === void 0 ? void 0 : firstFocusable.focus();
        }
        addEventListener('focusin', captureFocus);
        return removeEventListener('focusin', captureFocus, true);
    }, [ref, children]);
    return React__default["default"].createElement("div", { ref: ref }, children);
}
var focusable = [
    'a[href]',
    'area[href]',
    'input:not([disabled])',
    'select:not([disabled])',
    'textarea:not([disabled])',
    'button:not([disabled])',
    '[tabindex="0"]',
].join(', ');

exports.Modal = Modal;