From 3e198309f564f3ac71c31cdd556868ad2ebf1926 Mon Sep 17 00:00:00 2001 From: Reece Date: Thu, 13 Nov 2025 17:03:58 +0000 Subject: [PATCH] Remove tooltip stuff --- .../src/core/components/shared/Tooltip.tsx | 83 +++++++------------ 1 file changed, 28 insertions(+), 55 deletions(-) diff --git a/frontend/src/core/components/shared/Tooltip.tsx b/frontend/src/core/components/shared/Tooltip.tsx index cb406b414..77db24d46 100644 --- a/frontend/src/core/components/shared/Tooltip.tsx +++ b/frontend/src/core/components/shared/Tooltip.tsx @@ -65,10 +65,6 @@ export const Tooltip: React.FC = ({ const clickPendingRef = useRef(false); const tooltipIdRef = useRef(`tooltip-${Math.random().toString(36).slice(2)}`); - // Runtime guard: some browsers may surface non-Node EventTargets for relatedTarget/target - const isDomNode = (value: unknown): value is Node => - typeof Node !== 'undefined' && value instanceof Node; - const clearTimers = useCallback(() => { if (openTimeoutRef.current) { clearTimeout(openTimeoutRef.current); @@ -81,11 +77,6 @@ export const Tooltip: React.FC = ({ const isControlled = controlledOpen !== undefined; const open = (isControlled ? !!controlledOpen : internalOpen) && !disabled; - const childPropsRef = useRef(children.props); - useEffect(() => { - childPropsRef.current = children.props; - }, [children]); - const setOpen = useCallback( (newOpen: boolean) => { if (newOpen === open) return; // avoid churn @@ -107,14 +98,14 @@ export const Tooltip: React.FC = ({ sidebarState: sidebarContext?.sidebarState, }); - // Close on outside click: pinned -> close; not pinned -> optionally close + // Close on outside click: pinned → close; not pinned → optionally close const handleDocumentClick = useCallback( (e: MouseEvent) => { const tEl = tooltipRef.current; const trg = triggerRef.current; - const target = e.target as unknown; - const insideTooltip = Boolean(tEl && isDomNode(target) && tEl.contains(target)); - const insideTrigger = Boolean(trg && isDomNode(target) && trg.contains(target)); + const target = e.target as Node | null; + const insideTooltip = tEl && target && tEl.contains(target); + const insideTrigger = trg && target && trg.contains(target); // If pinned: only close when clicking outside BOTH tooltip & trigger if (isPinned) { @@ -171,9 +162,9 @@ export const Tooltip: React.FC = ({ const handlePointerEnter = useCallback( (e: React.PointerEvent) => { if (!isPinned && !disabled) openWithDelay(); - (childPropsRef.current as any)?.onPointerEnter?.(e); + (children.props as any)?.onPointerEnter?.(e); }, - [isPinned, openWithDelay, disabled] + [isPinned, openWithDelay, children.props, disabled] ); const handlePointerLeave = useCallback( @@ -181,40 +172,39 @@ export const Tooltip: React.FC = ({ const related = e.relatedTarget as Node | null; // Moving into the tooltip → keep open - if (isDomNode(related) && tooltipRef.current && tooltipRef.current.contains(related)) { - + if (related && tooltipRef.current && tooltipRef.current.contains(related)) { (children.props as any)?.onPointerLeave?.(e); return; } // Ignore transient leave between mousedown and click if (clickPendingRef.current) { - (childPropsRef.current as any)?.onPointerLeave?.(e); + (children.props as any)?.onPointerLeave?.(e); return; } clearTimers(); if (!isPinned) setOpen(false); - (childPropsRef.current as any)?.onPointerLeave?.(e); + (children.props as any)?.onPointerLeave?.(e); }, - [clearTimers, isPinned, setOpen] + [clearTimers, isPinned, setOpen, children.props] ); const handleMouseDown = useCallback( (e: React.MouseEvent) => { clickPendingRef.current = true; - (childPropsRef.current as any)?.onMouseDown?.(e); + (children.props as any)?.onMouseDown?.(e); }, - [] + [children.props] ); const handleMouseUp = useCallback( (e: React.MouseEvent) => { // allow microtask turn so click can see this false queueMicrotask(() => (clickPendingRef.current = false)); - (childPropsRef.current as any)?.onMouseUp?.(e); + (children.props as any)?.onMouseUp?.(e); }, - [] + [children.props] ); const handleClick = useCallback( @@ -229,31 +219,31 @@ export const Tooltip: React.FC = ({ return; } clickPendingRef.current = false; - (childPropsRef.current as any)?.onClick?.(e); + (children.props as any)?.onClick?.(e); }, - [clearTimers, pinOnClick, open, setOpen] + [clearTimers, pinOnClick, open, setOpen, children.props] ); // Keyboard / focus accessibility const handleFocus = useCallback( (e: React.FocusEvent) => { if (!isPinned && !disabled && openOnFocus) openWithDelay(); - (childPropsRef.current as any)?.onFocus?.(e); + (children.props as any)?.onFocus?.(e); }, - [isPinned, openWithDelay, disabled, openOnFocus] + [isPinned, openWithDelay, children.props, disabled, openOnFocus] ); const handleBlur = useCallback( (e: React.FocusEvent) => { const related = e.relatedTarget as Node | null; - if (isDomNode(related) && tooltipRef.current && tooltipRef.current.contains(related)) { + if (related && tooltipRef.current && tooltipRef.current.contains(related)) { (children.props as any)?.onBlur?.(e); return; } if (!isPinned) setOpen(false); - (childPropsRef.current as any)?.onBlur?.(e); + (children.props as any)?.onBlur?.(e); }, - [isPinned, setOpen] + [isPinned, setOpen, children.props] ); const handleKeyDown = useCallback((e: React.KeyboardEvent) => { @@ -268,36 +258,20 @@ export const Tooltip: React.FC = ({ const handleTooltipPointerLeave = useCallback( (e: React.PointerEvent) => { const related = e.relatedTarget as Node | null; - if (isDomNode(related) && triggerRef.current && triggerRef.current.contains(related)) return; + if (related && triggerRef.current && triggerRef.current.contains(related)) return; if (!isPinned) setOpen(false); }, [isPinned, setOpen] ); - const originalChildRef = (children as any).ref; - const mergedRef = useMemo(() => { - if (typeof originalChildRef === 'function') { - return (node: HTMLElement | null) => { - triggerRef.current = node || null; - originalChildRef(node); - }; - } - - if (originalChildRef && typeof originalChildRef === 'object') { - return (node: HTMLElement | null) => { - triggerRef.current = node || null; - (originalChildRef as React.MutableRefObject).current = node; - }; - } - - return (node: HTMLElement | null) => { - triggerRef.current = node || null; - }; - }, [originalChildRef]); - // Enhance child with handlers and ref const childWithHandlers = React.cloneElement(children as any, { - ref: mergedRef, + ref: (node: HTMLElement | null) => { + triggerRef.current = node || null; + const originalRef = (children as any).ref; + if (typeof originalRef === 'function') originalRef(node); + else if (originalRef && typeof originalRef === 'object') (originalRef as any).current = node; + }, 'aria-describedby': open ? tooltipIdRef.current : undefined, onPointerEnter: handlePointerEnter, onPointerLeave: handlePointerLeave, @@ -389,4 +363,3 @@ export const Tooltip: React.FC = ({ ); }; -