paste transform followup (#17624)

Co-authored-by: Jack Wotherspoon <jackwoth@google.com>

packages/cli/src/ui/hooks/useMouseClick.ts

@@ -6,18 +6,30 @@
 
 import { getBoundingBox, type DOMElement } from 'ink';
 import type React from 'react';
-import { useMouse, type MouseEvent } from '../contexts/MouseContext.js';
+import { useCallback, useRef } from 'react';
+import {
+  useMouse,
+  type MouseEvent,
+  type MouseEventName,
+} from '../contexts/MouseContext.js';
 
 export const useMouseClick = (
   containerRef: React.RefObject<DOMElement | null>,
   handler: (event: MouseEvent, relativeX: number, relativeY: number) => void,
-  options: { isActive?: boolean; button?: 'left' | 'right' } = {},
+  options: {
+    isActive?: boolean;
+    button?: 'left' | 'right';
+    name?: MouseEventName;
+  } = {},
 ) => {
-  const { isActive = true, button = 'left' } = options;
+  const { isActive = true, button = 'left', name } = options;
+  const handlerRef = useRef(handler);
+  handlerRef.current = handler;
 
-  useMouse(
+  const onMouse = useCallback(
     (event: MouseEvent) => {
-      const eventName = button === 'left' ? 'left-press' : 'right-release';
+      const eventName =
+        name ?? (button === 'left' ? 'left-press' : 'right-release');
       if (event.name === eventName && containerRef.current) {
         const { x, y, width, height } = getBoundingBox(containerRef.current);
         // Terminal mouse events are 1-based, Ink layout is 0-based.
@@ -33,10 +45,12 @@ export const useMouseClick = (
           relativeY >= 0 &&
           relativeY < height
         ) {
-          handler(event, relativeX, relativeY);
+          handlerRef.current(event, relativeX, relativeY);
         }
       }
     },
-    { isActive },
+    [containerRef, button, name],
   );
+
+  useMouse(onMouse, { isActive });
 };