`
<Manager><div role="presentation"
id="popover"
className={popoverClasses}
onClick={onDismiss}
onKeyUp={onDismiss}
>{backdrop && <div className={styles.popover__backdrop} />}
<div ref={popoverRef}> --how to implement
<Reference>
{({ ref }) => {
// how can we implement ref
ref = ref; -- how to implement
const targetProps = {
ref: setReferenceRef,
// Accessibility
//event handler
onKeyUp: (keyUpEvent) => {
if (
['Enter', 'Space Bar', 'Spacebar', ' '].includes(
// key of event handler
keyUpEvent.key,
)
) {
if (!open) {
onEvent();
} else {
onReferenceClickClose();
}
}
},
[on${event[0].toUpperCase()}${event.substr(1)}]: !open
? onEvent()
: onReferenceClickClose(),
};
return (
<span
role="button"
className={styles.popover__reference}
tabIndex={tabIndex}
aria-haspopup="dialog"
{...targetProps}
>
{reference}
{refIcon}
);
}}
<Popper
placement={position}
modifiers={{
...modifiers,
preventOverflow: {
boundariesElement: boundaries,
},
}}
>
{({ ref, placement, arrowProps }) => (
{title && {title}}
{children(closePopover)}
)}
`
