tldraw 3.16.0-canary.947c633374a9 → 3.16.0-canary.9a2aa6d47255

package/src/lib/ui/components/primitives/TldrawUiTooltip.tsx

@@ -34,7 +34,7 @@ class TooltipManager {
 		sideOffset: number
 		showOnMobile: boolean
 		targetElement: HTMLElement
-		delayDuration: number | undefined
+		delayDuration: number
 	} | null>('current tooltip', null)
 	private destroyTimeoutId: number | null = null
 
@@ -52,7 +52,7 @@ class TooltipManager {
 		side: 'top' | 'right' | 'bottom' | 'left',
 		sideOffset: number,
 		showOnMobile: boolean,
-		delayDuration: number | undefined
+		delayDuration: number
 	) {
 		// Clear any existing destroy timeout
 		if (this.destroyTimeoutId) {
@@ -139,11 +139,9 @@ export function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderPro
 
 // The singleton tooltip component that renders once
 function TooltipSingleton() {
-	const editor = useMaybeEditor()
 	const [isOpen, setIsOpen] = useState(false)
 	const triggerRef = useRef<HTMLDivElement>(null)
 	const isFirstShowRef = useRef(true)
-	const showTimeoutRef = useRef<number | null>(null)
 
 	const currentTooltip = useValue(
 		'current tooltip',
@@ -153,12 +151,7 @@ function TooltipSingleton() {
 
 	// Update open state and trigger position
 	useEffect(() => {
-		// Clear any existing show timeout
-		if (showTimeoutRef.current) {
-			clearTimeout(showTimeoutRef.current)
-			showTimeoutRef.current = null
-		}
-
+		let timer: ReturnType<typeof setTimeout> | null = null
 		if (currentTooltip && triggerRef.current) {
 			// Position the invisible trigger element over the active element
 			const activeRect = currentTooltip.targetElement.getBoundingClientRect()
@@ -173,11 +166,12 @@ function TooltipSingleton() {
 			trigger.style.zIndex = '9999'
 
 			// Handle delay for first show
-			if (isFirstShowRef.current && editor) {
-				showTimeoutRef.current = editor.timers.setTimeout(() => {
+			if (isFirstShowRef.current) {
+				// eslint-disable-next-line no-restricted-globals
+				timer = setTimeout(() => {
 					setIsOpen(true)
 					isFirstShowRef.current = false
-				}, currentTooltip.delayDuration ?? editor.options.tooltipDelayMs)
+				}, currentTooltip.delayDuration)
 			} else {
 				// Subsequent tooltips show immediately
 				setIsOpen(true)
@@ -188,7 +182,13 @@ function TooltipSingleton() {
 			// Reset first show state after tooltip is hidden
 			isFirstShowRef.current = true
 		}
-	}, [editor, currentTooltip])
+
+		return () => {
+			if (timer !== null) {
+				clearTimeout(timer)
+			}
+		}
+	}, [currentTooltip])
 
 	if (!currentTooltip) {
 		return null
@@ -249,15 +249,13 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			return <>{children}</>
 		}
 
+		const delayDurationToUse =
+			delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+
 		// Fallback to old behavior if no provider
 		if (!hasProvider) {
 			return (
-				<_Tooltip.Root
-					delayDuration={
-						delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
-					}
-					disableHoverableContent
-				>
+				<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent>
 					<_Tooltip.Trigger asChild ref={ref}>
 						{children}
 					</_Tooltip.Trigger>
@@ -288,7 +286,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				sideToUse,
 				sideOffset,
 				showOnMobile,
-				delayDuration
+				delayDurationToUse
 			)
 		}
 
@@ -306,7 +304,7 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				sideToUse,
 				sideOffset,
 				showOnMobile,
-				delayDuration
+				delayDurationToUse
 			)
 		}
 

package/src/lib/ui/version.ts

@@ -1,9 +1,9 @@
 // This file is automatically generated by internal/scripts/refresh-assets.ts.
 // Do not edit manually. Or do, I'm a comment, not a cop.
 
-export const version = '3.16.0-canary.947c633374a9'
+export const version = '3.16.0-canary.9a2aa6d47255'
 export const publishDates = {
 	major: '2024-09-13T14:36:29.063Z',
-	minor: '2025-08-20T09:52:08.235Z',
-	patch: '2025-08-20T09:52:08.235Z',
+	minor: '2025-08-21T12:50:12.632Z',
+	patch: '2025-08-21T12:50:12.632Z',
 }

package/src/lib/ui.css

@@ -1047,6 +1047,9 @@
 }
 
 @media (hover: hover) {
+	.tlui-style-panel .tlui-button[aria-expanded='true'] {
+		background: none;
+	}
 	.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
 		opacity: 1;
 		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);

package/tldraw.css

@@ -2830,6 +2830,9 @@ it from receiving any pointer events or affecting the cursor. */
 }
 
 @media (hover: hover) {
+	.tlui-style-panel .tlui-button[aria-expanded='true'] {
+		background: none;
+	}
 	.tlui-style-panel .tlui-button[data-state='open']:not(:hover)::after {
 		opacity: 1;
 		background: linear-gradient(270deg, rgba(144, 144, 144, 0) 0%, var(--tl-color-muted-2) 100%);