feat(starfish): Close detail panel when clicked outside (#48027)

static/app/views/starfish/components/detailPanel.tsx

@@ -1,4 +1,4 @@
-import {useEffect, useState} from 'react';
+import {useEffect, useRef, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from 'sentry/components/button';
@@ -6,6 +6,7 @@ import {IconClose} from 'sentry/icons/iconClose';
 import {t} from 'sentry/locale';
 import space from 'sentry/styles/space';
 import useKeyPress from 'sentry/utils/useKeyPress';
+import useOnClickOutside from 'sentry/utils/useOnClickOutside';
 import SlideOverPanel from 'sentry/views/starfish/components/slideOverPanel';
 
 type DetailProps = {
@@ -29,6 +30,12 @@ export default function Detail({children, detailKey, onClose}: DetailProps) {
     }
   }, [detailKey]);
 
+  const panelRef = useRef<HTMLDivElement>(null);
+  useOnClickOutside(panelRef, () => {
+    onClose?.();
+    setState({collapsed: true});
+  });
+
   useEffect(() => {
     if (escapeKeyPressed) {
       onClose?.();
@@ -38,7 +45,7 @@ export default function Detail({children, detailKey, onClose}: DetailProps) {
   }, [escapeKeyPressed]);
 
   return (
-    <SlideOverPanel collapsed={state.collapsed}>
+    <SlideOverPanel collapsed={state.collapsed} ref={panelRef}>
       <CloseButtonWrapper>
         <CloseButton
           priority="link"

static/app/views/starfish/components/slideOverPanel.tsx

@@ -1,3 +1,4 @@
+import {ForwardedRef, forwardRef} from 'react';
 import isPropValid from '@emotion/is-prop-valid';
 import styled from '@emotion/styled';
 import {motion} from 'framer-motion';
@@ -9,9 +10,15 @@ type SlideOverPanelProps = {
   collapsed: boolean;
 };
 
-export default function SlideOverPanel({collapsed, children}: SlideOverPanelProps) {
+export default forwardRef(SlideOverPanel);
+
+function SlideOverPanel(
+  {collapsed, children}: SlideOverPanelProps,
+  ref: ForwardedRef<HTMLDivElement>
+) {
   return (
     <_SlideOverPanel
+      ref={ref}
       collapsed={collapsed}
       initial={{opacity: 0, x: PANEL_WIDTH}}
       animate={!collapsed ? {opacity: 1, x: 0} : {opacity: 0, x: PANEL_WIDTH}}