feat: Unified icon picker (#7038)

app/components/Popover.tsx

@@ -20,15 +20,18 @@ type Props = PopoverProps & {
   hide: () => void;
 };
 
-const Popover: React.FC<Props> = ({
-  children,
-  shrink,
-  width = 380,
-  scrollable = true,
-  flex,
-  mobilePosition,
-  ...rest
-}: Props) => {
+const Popover = (
+  {
+    children,
+    shrink,
+    width = 380,
+    scrollable = true,
+    flex,
+    mobilePosition,
+    ...rest
+  }: Props,
+  ref: React.Ref<HTMLDivElement>
+) => {
   const isMobile = useMobile();
 
   // Custom Escape handler rather than using hideOnEsc from reakit so we can
@@ -50,6 +53,7 @@ const Popover: React.FC<Props> = ({
     return (
       <Dialog {...rest} modal>
         <Contents
+          ref={ref}
           $shrink={shrink}
           $scrollable={scrollable}
           $flex={flex}
@@ -64,6 +68,7 @@ const Popover: React.FC<Props> = ({
   return (
     <StyledPopover {...rest} hideOnEsc={false} hideOnClickOutside>
       <Contents
+        ref={ref}
         $shrink={shrink}
         $width={width}
         $scrollable={scrollable}
@@ -123,4 +128,4 @@ const Contents = styled.div<ContentsProps>`
   `};
 `;
 
-export default Popover;
+export default React.forwardRef(Popover);