@vimeo/iris/utils/hooks/usePortal_DEPRECATED/usePortal_DEPRECATED.esm.js

Vimeo Design System

import { c as __assign } from '../../../tslib.es6-7f0e734f.js';
import React__default, { useRef, cloneElement } from 'react';
import { createPortal } from 'react-dom';
import { Screen } from './usePortal_DEPRECATED.style.esm.js';
import { useMountAnimations } from './useMountAnimations.esm.js';
import { coordinates } from './coordinates.esm.js';
import { Anchor } from './Anchor.esm.js';
import { useOutsideClick } from '../useOutsideClick.esm.js';
import { SSR } from '../../DOM/SSR.esm.js';
import { createPortalOutlet } from '../../DOM/createPortalOutlet.esm.js';
import 'styled-components';
import '../useIsomorphicEffect.esm.js';
import '../../DOM/getComputedStyles.esm.js';
import '../../DOM/animate.esm.js';
import '../../events/onEvent.esm.js';
import 'polished';
import '../../DOM/createElement.esm.js';

function usePortal_DEPRECATED(Component, portalConfig) {
    var screenRef = useRef(null);
    var childRef = useRef(null);
    var ref = useRef(null);
    var _a = portalConfig.allowPageInteraction, allowPageInteraction = _a === void 0 ? false : _a, _b = portalConfig.anchorToWindow, anchorToWindow = _b === void 0 ? false : _b, _c = portalConfig.attach, attach = _c === void 0 ? null : _c, forceActive = portalConfig.forceActive, _d = portalConfig.margin, margin = _d === void 0 ? 8 : _d, onChildClick = portalConfig.onClick, _e = portalConfig.screen, screen = _e === void 0 ? false : _e, _f = portalConfig.trigger, trigger = _f === void 0 ? 'click' : _f;
    var _g = useMountAnimations(portalConfig, { childRef: childRef, screenRef: screenRef }), open = _g.open, close = _g.close, active = _g.active, animationProps = _g.animationProps;
    var controlled = forceActive === true || forceActive === false;
    var toggle = function (e) { return (!controlled && active ? close(e) : open(e)); };
    var toggleWithChildClick = function (e) {
        onChildClick && onChildClick(e);
        toggle(e);
    };
    useOutsideClick([ref, childRef], function (event) {
        if (allowPageInteraction)
            return;
        if (!controlled && trigger === 'click')
            close(event);
    });
    if (SSR)
        return [null, null];
    var outlet = createPortalOutlet('iris-portals');
    var clickProps = { onClick: toggleWithChildClick };
    var hoverProps = { onMouseEnter: open, onMouseLeave: close };
    var clickable = !controlled && trigger === 'click' && clickProps;
    var hoverable = !controlled && trigger === 'hover' && hoverProps;
    var children = cloneElement(Component, __assign({ ref: childRef }, animationProps));
    var Portal = createPortal(React__default.createElement(React__default.Fragment, null,
        React__default.createElement(Anchor, { anchor: ref, anchorToWindow: anchorToWindow, attach: coordinates(attach, anchorToWindow), childRef: childRef, margin: margin, children: children }),
        screen && React__default.createElement(Screen, { ref: screenRef, onClick: toggle })), outlet);
    return [active && Portal, __assign(__assign({ ref: ref }, clickable), hoverable)];
}
function isForwardRef(type) {
    return (type.$$typeof &&
        type.$$typeof.toString() === 'Symbol(react.forward_ref)');
}
function isDOMElement(type) {
    return typeof type === 'string';
}
function validate(_a) {
    var type = _a.type;
    return isDOMElement(type) || isForwardRef(type);
}

export { usePortal_DEPRECATED, validate };