Event data report UI.

components/pages/reports/PopupForm.js

@@ -0,0 +1,30 @@
+import { createPortal } from 'react-dom';
+import { useDocumentClick, useKeyDown } from 'react-basics';
+import classNames from 'classnames';
+import styles from './PopupForm.module.css';
+
+export function PopupForm({ element, className, children, onClose }) {
+  const { right, top } = element.getBoundingClientRect();
+  const style = { position: 'absolute', left: right, top };
+
+  useKeyDown('Escape', onClose);
+
+  useDocumentClick(e => {
+    if (e.target !== element && !element?.parentElement?.contains(e.target)) {
+      onClose();
+    }
+  });
+
+  const handleClick = e => {
+    e.stopPropagation();
+  };
+
+  return createPortal(
+    <div className={classNames(styles.form, className)} style={style} onClick={handleClick}>
+      {children}
+    </div>,
+    document.body,
+  );
+}
+
+export default PopupForm;