Make InteractivePopover take a type argument of the trigger HTMLElement

Author: kraenhansen

packages/compass-components/src/components/interactive-popover.tsx

@@ -42,12 +42,12 @@ const closeButtonStyles = css({
   right: spacing[2],
 });
 
-type InteractivePopoverProps = {
+type InteractivePopoverProps<TriggerElement extends HTMLElement> = {
   className?: string;
   children: React.ReactNode;
   trigger: (triggerProps: {
-    onClick: React.MouseEventHandler<HTMLButtonElement>;
-    ref: React.LegacyRef<HTMLButtonElement>;
+    onClick: React.MouseEventHandler<TriggerElement>;
+    ref: React.ForwardedRef<TriggerElement>;
     children: React.ReactNode;
   }) => React.ReactElement;
   hideCloseButton?: boolean;
@@ -65,7 +65,7 @@ type InteractivePopoverProps = {
   'align' | 'justify' | 'spacing' | 'popoverZIndex'
 >;
 
-function InteractivePopover({
+function InteractivePopover<TriggerElement extends HTMLElement>({
   className,
   children,
   trigger,
@@ -80,9 +80,9 @@ function InteractivePopover({
   popoverZIndex,
   containerClassName,
   closeButtonClassName,
-}: InteractivePopoverProps): React.ReactElement {
+}: InteractivePopoverProps<TriggerElement>): React.ReactElement {
   const darkMode = useDarkMode();
-  const triggerRef = useRef<HTMLButtonElement>(null);
+  const triggerRef = useRef<TriggerElement>(null);
   const closeButtonRef = useRef<HTMLButtonElement>(null);
   const popoverContentContainerRef = useRef<HTMLDivElement>(null);