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

Opinionated design system for Drivy's projects.

import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
import React, { useRef, useState } from 'react';
import useBreakpoint from '../../hooks/useBreakpoint.js';
import Popover from './index.js';

const mergeRefs = (node, originalRef, buttonRef, extraRef) => {
    buttonRef.current = node;
    extraRef === null || extraRef === void 0 ? void 0 : extraRef(node);
    if (typeof originalRef === "function") {
        originalRef(node);
    }
    else if (originalRef && typeof originalRef === "object") {
        originalRef.current = node;
    }
};
function PopoverWrapper({ content, children, trigger, onOpenChange, isOpenByDefault = false, disabled = false, responsive = true, ...popoverProps }) {
    var _a;
    const buttonRef = useRef(null);
    const [isOpen, setIsOpen] = useState(isOpenByDefault);
    const { breakpoint } = useBreakpoint();
    const isMobile = responsive && (breakpoint === "sm" || breakpoint === "xs");
    const handleOpenChange = (open) => {
        setIsOpen(open);
        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(open);
    };
    if (disabled)
        return children;
    if (isMobile) {
        const childProps = children.props;
        return (jsxs(Fragment, { children: [React.cloneElement(children, {
                    onClick: (event) => {
                        var _a;
                        (_a = childProps.onClick) === null || _a === void 0 ? void 0 : _a.call(childProps, event);
                        handleOpenChange(true);
                    },
                    ref: (node) => mergeRefs(node, children.ref, buttonRef),
                }), jsx(Popover, { ...popoverProps, responsive: true, isOpen: isOpen, onOpenChange: handleOpenChange, targetRef: buttonRef, children: content })] }));
    }
    return (jsx(Popover, { ...popoverProps, responsive: false, isOpen: isOpen, onOpenChange: handleOpenChange, targetRef: buttonRef, trigger: trigger, interactive: (_a = popoverProps.interactive) !== null && _a !== void 0 ? _a : trigger === "mouseenter", children: ({ refs, getReferenceProps, renderFloating }) => {
            const referenceProps = getReferenceProps(children.props);
            return (jsxs(Fragment, { children: [React.cloneElement(children, {
                        ...referenceProps,
                        ref: (node) => mergeRefs(node, children.ref, buttonRef, refs.setReference),
                    }), renderFloating(content)] }));
        } }));
}

export { PopoverWrapper };
//# sourceMappingURL=PopoverWrapper.js.map