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

Opinionated design system for Drivy's projects.

import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import react, { useRef, useState } from "react";
import useBreakpoint from "../../hooks/useBreakpoint.js";
import index from "./index.js";
const mergeRefs = (node, originalRef, buttonRef, extraRef)=>{
    buttonRef.current = node;
    extraRef?.(node);
    if ("function" == typeof originalRef) originalRef(node);
    else if (originalRef && "object" == typeof originalRef) originalRef.current = node;
};
function PopoverWrapper({ content, children, trigger, onOpenChange, isOpenByDefault = false, disabled = false, responsive = true, ...popoverProps }) {
    const buttonRef = useRef(null);
    const [isOpen, setIsOpen] = useState(isOpenByDefault);
    const { breakpoint } = useBreakpoint();
    const isMobile = responsive && ("sm" === breakpoint || "xs" === breakpoint);
    const handleOpenChange = (open)=>{
        setIsOpen(open);
        onOpenChange?.(open);
    };
    if (disabled) return children;
    if (isMobile) {
        const childProps = children.props;
        return /*#__PURE__*/ jsxs(Fragment, {
            children: [
                /*#__PURE__*/ react.cloneElement(children, {
                    onClick: (event)=>{
                        childProps.onClick?.(event);
                        handleOpenChange(true);
                    },
                    ref: (node)=>mergeRefs(node, children.ref, buttonRef)
                }),
                /*#__PURE__*/ jsx(index, {
                    ...popoverProps,
                    responsive: true,
                    isOpen: isOpen,
                    onOpenChange: handleOpenChange,
                    targetRef: buttonRef,
                    children: content
                })
            ]
        });
    }
    return /*#__PURE__*/ jsx(index, {
        ...popoverProps,
        responsive: false,
        isOpen: isOpen,
        onOpenChange: handleOpenChange,
        targetRef: buttonRef,
        trigger: trigger,
        interactive: popoverProps.interactive ?? "mouseenter" === trigger,
        children: ({ refs, getReferenceProps, renderFloating })=>{
            const referenceProps = getReferenceProps(children.props);
            return /*#__PURE__*/ jsxs(Fragment, {
                children: [
                    /*#__PURE__*/ react.cloneElement(children, {
                        ...referenceProps,
                        ref: (node)=>mergeRefs(node, children.ref, buttonRef, refs.setReference)
                    }),
                    renderFloating(content)
                ]
            });
        }
    });
}
export { PopoverWrapper };

//# sourceMappingURL=PopoverWrapper.js.map