import { arrow, FloatingArrow, offset, useClick, useDismiss, useFloating, useInteractions, useTransitionStyles, } from '@floating-ui/react'; import React, { useRef, useState } from 'react'; interface IPopover { children: React.ReactElement> content: React.ReactNode } /** * Popover * * Similar to tooltip, but requires a click and is used for larger blocks * of information. */ const Popover: React.FC = (props) => { const { children, content } = props; const [isOpen, setIsOpen] = useState(false); const arrowRef = useRef(null); const { x, y, strategy, refs, context } = useFloating({ open: isOpen, onOpenChange: setIsOpen, placement: 'top', middleware: [ offset(10), arrow({ element: arrowRef, }), ], }); const click = useClick(context); const dismiss = useDismiss(context); const { isMounted, styles } = useTransitionStyles(context, { initial: { opacity: 0, transform: 'scale(0.8)', }, duration: { open: 200, close: 200, }, }); const { getReferenceProps, getFloatingProps } = useInteractions([ click, dismiss, ]); return ( <> {React.cloneElement(children, { ref: refs.setReference, ...getReferenceProps(), className: 'cursor-help', })} {(isMounted) && (
{content}
)} ); }; export default Popover;