@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, }) => {
    return (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 && (breakpoint === "sm" || breakpoint === "xs");
    const mobileChildren = typeof restProps.children === "function" ? null : restProps.children;
    return isMobile ? (jsx(MobilePopover, { isOpen: restProps.isOpen, onDismiss: () => {
            var _a;
            (_a = restProps.onOpenChange) === null || _a === void 0 ? void 0 : _a.call(restProps, false);
        }, bodySpacing: bodySpacing, ariaLabel: restProps["aria-label"], onShow: restProps.onShow, onHidden: restProps.onHidden, children: mobileChildren })) : (jsx(DesktopPopover, { arrow: arrow, placement: placement, bodySpacing: bodySpacing, appendToBody: appendToBody, fitContent: fitContent, ...restProps }));
};

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