chore(components): refactor InteractivePopover to take a type argument for the trigger element (#6495)

* Make InteractivePopover take a type argument of the trigger HTMLElement

* Update existing usage

Author: kraenhansen

packages/compass-aggregations/src/components/pipeline-toolbar/pipeline-header/index.tsx

@@ -71,7 +71,7 @@ const containedElements = [
 const SavedPipelinesButton: React.FunctionComponent = () => {
   const [isVisible, setIsVisible] = useState(false);
   return (
-    <InteractivePopover
+    <InteractivePopover<HTMLButtonElement>
       className={savedAggregationsPopoverStyles}
       // To prevent popover from closing when confirmation modal is shown
       containedElements={containedElements}

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

@@ -41,12 +41,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.Ref<TriggerElement>;
     children: React.ReactNode;
   }) => React.ReactElement;
   hideCloseButton?: boolean;
@@ -64,7 +64,7 @@ type InteractivePopoverProps = {
   'align' | 'justify' | 'spacing' | 'popoverZIndex'
 >;
 
-function InteractivePopover({
+function InteractivePopover<TriggerElement extends HTMLElement>({
   className,
   children,
   trigger,
@@ -79,9 +79,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);
 

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

@@ -524,7 +524,7 @@ const SignalPopover: React.FunctionComponent<SignalPopoverProps> = ({
       `calc(14px + ${' insight'.length}ch)`;
 
   return (
-    <InteractivePopover
+    <InteractivePopover<HTMLButtonElement>
       className={cx(
         popoverStyles,
         // If trigger is not visible, we are in this weird state where trigger

packages/compass-query-bar/src/components/query-history-button-popover.tsx

@@ -73,7 +73,7 @@ const QueryHistoryButtonPopover = ({
   }, [setIsOpen]);
 
   return (
-    <InteractivePopover
+    <InteractivePopover<HTMLButtonElement>
       className={queryHistoryPopoverStyles}
       trigger={({ onClick, ref, children }) => (
         <>

packages/compass-sidebar/src/components/connections-filter-popover.tsx

@@ -102,7 +102,7 @@ export default function ConnectionsFilterPopover({
               onMouseLeave={handleButtonMouseLeave}
               active={open}
               aria-label="Filter connections"
-              ref={ref as React.Ref<unknown>}
+              ref={ref}
             >
               <Icon glyph="Filter" />
               {isActivated && (