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

Opinionated design system for Drivy's projects.

import { jsx } from "react/jsx-runtime";
import useBreakpoint from "../../hooks/useBreakpoint.js";
import Modal from "../Modal/index.js";
import { DesktopPopover } from "./DesktopPopover.js";
const MobilePopover = ({ isOpen, children, ariaLabel = "Popover mobile modal", onDismiss, bodySpacing, onShow, onHidden })=>/*#__PURE__*/ jsx(Modal, {
        "aria-label": ariaLabel,
        isOpen: isOpen,
        onDismissAttempt: onDismiss,
        bodySpacing: bodySpacing,
        onShow: onShow,
        onHidden: onHidden,
        children: children
    });
const Popover = ({ arrow = false, placement = "bottom-start", bodySpacing = true, appendToBody = false, fitContent = false, responsive = true, ...restProps })=>{
    const { breakpoint } = useBreakpoint();
    const isMobile = responsive && ("sm" === breakpoint || "xs" === breakpoint);
    const mobileChildren = "function" == typeof restProps.children ? null : restProps.children;
    return isMobile ? /*#__PURE__*/ jsx(MobilePopover, {
        isOpen: restProps.isOpen,
        onDismiss: ()=>{
            restProps.onOpenChange?.(false);
        },
        bodySpacing: bodySpacing,
        ariaLabel: restProps["aria-label"],
        onShow: restProps.onShow,
        onHidden: restProps.onHidden,
        children: mobileChildren
    }) : /*#__PURE__*/ jsx(DesktopPopover, {
        arrow: arrow,
        placement: placement,
        bodySpacing: bodySpacing,
        appendToBody: appendToBody,
        fitContent: fitContent,
        ...restProps
    });
};
const components_Popover = Popover;
export default components_Popover;

//# sourceMappingURL=index.js.map