@drivy/cobalt/components/Popover/index.js

Opinionated design system for Drivy's projects.

import React, { useCallback, useEffect } from 'react';
import Tippy from '@tippyjs/react';
import { sticky } from 'tippy.js';
import useBreakpoint from '../../hooks/useBreakpoint.js';
import Modal from '../Modal/index.js';
import LazyTippy from './LazyTippy.js';
import { zIndexes } from '../../tokens/index.js';

const ESC_KEY_CODE = 27;
const defaultTippyProps = {
    animation: "shift-away-subtle",
    interactive: true,
    interactiveBorder: 10,
    delay: [0, 0],
    duration: [200, 150],
    maxWidth: 500,
    sticky: true,
    plugins: [sticky],
    theme: "light cobalt-popover",
    inertia: true,
};
const MobilePopover = ({ isOpen, children, ariaLabel = "Popover mobile modal", onDismiss, bodySpacing, onShow, onHidden, }) => {
    return (React.createElement(Modal, { "aria-label": ariaLabel, isOpen: isOpen, onDismissAttempt: onDismiss, bodySpacing: bodySpacing, onShow: onShow, onHidden: onHidden }, children));
};
const Popover = ({ isOpen, targetRef, close, "aria-label": ariaLabel, children, bodySpacing = true, onShow, onHidden, 
// Desktop props
arrow = false, placement = "bottom-start", flip = true, theme = "", distance = 8, zIndex = zIndexes.dropdown, appendToBody = false, fitContent = false, lazy, }) => {
    const { breakpoint } = useBreakpoint();
    const isMobile = breakpoint === "sm" || breakpoint === "xs";
    const escListener = useCallback((event) => {
        if (event.keyCode === ESC_KEY_CODE && isOpen)
            close();
    }, [isOpen, close]);
    useEffect(() => {
        window.addEventListener("keydown", escListener);
        return () => window.removeEventListener("keydown", escListener);
    }, [escListener]);
    const onTippyClose = () => {
        if (onHidden)
            onHidden();
    };
    const onTippyOpen = () => {
        if (onShow)
            onShow();
    };
    const TippyComp = lazy ? LazyTippy : Tippy;
    return isMobile ? (React.createElement(MobilePopover, { isOpen: isOpen, onDismiss: close, bodySpacing: bodySpacing, ariaLabel: ariaLabel, onShow: onShow, onHidden: onHidden }, children)) : (React.createElement(TippyComp, { content: bodySpacing ? (React.createElement("div", { className: "cobalt-popover--bodySpacing" }, children)) : (children), ...defaultTippyProps, visible: isOpen, reference: targetRef, theme: `${defaultTippyProps.theme} ${theme} ${arrow ? "cobalt-popover--withArrow" : ""} ${fitContent ? "cobalt-popover--fitContent" : ""}`, offset: [0, distance], arrow, placement, zIndex, popperOptions: { modifiers: [{ name: "flip", enabled: flip }] }, onHidden: onTippyClose, onShow: onTippyOpen, onClickOutside: close, appendTo: appendToBody ? document.body : "parent" }));
};

export { Popover as default };
//# sourceMappingURL=index.js.map