tldraw 4.2.2 → 4.2.3

package/src/lib/ui/components/Minimap/DefaultMinimap.tsx

@@ -24,7 +24,7 @@ export function DefaultMinimap() {
 	const rCanvas = React.useRef<HTMLCanvasElement>(null!)
 	const rPointing = React.useRef(false)
 
-	const minimapRef = React.useRef<MinimapManager | undefined>(undefined)
+	const minimapRef = React.useRef<MinimapManager>()
 
 	React.useEffect(() => {
 		try {

package/src/lib/ui/components/OfflineIndicator/OfflineIndicator.tsx

@@ -1,16 +1,15 @@
+import classNames from 'classnames'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
 import { TldrawUiIcon } from '../primitives/TldrawUiIcon'
-import { TldrawUiTooltip } from '../primitives/TldrawUiTooltip'
 
 /** @public @react */
 export function OfflineIndicator() {
 	const msg = useTranslation()
 
 	return (
-		<TldrawUiTooltip content={msg('status.offline')}>
-			<div className="tlui-offline-indicator">
-				<TldrawUiIcon icon="status-offline" label={msg('status.offline')} small />
-			</div>
-		</TldrawUiTooltip>
+		<div className={classNames('tlui-offline-indicator')}>
+			{msg('status.offline')}
+			<TldrawUiIcon label={msg('status.offline')} icon="status-offline" small />
+		</div>
 	)
 }

package/src/lib/ui/components/PageMenu/PageItemInput.tsx

@@ -48,9 +48,7 @@ export const PageItemInput = function PageItemInput({
 	return (
 		<TldrawUiInput
 			className="tlui-page-menu__item__input"
-			ref={(el) => {
-				rInput.current = el
-			}}
+			ref={(el) => (rInput.current = el)}
 			defaultValue={name}
 			onValueChange={handleChange}
 			onComplete={onComplete}

package/src/lib/ui/components/SharePanel/PeopleMenu.tsx

@@ -3,10 +3,8 @@ import { Popover as _Popover } from 'radix-ui'
 import { ReactNode } from 'react'
 import { PORTRAIT_BREAKPOINT } from '../../constants'
 import { useBreakpoint } from '../../context/breakpoints'
-import { useCollaborationStatus } from '../../hooks/useCollaborationStatus'
 import { useMenuIsOpen } from '../../hooks/useMenuIsOpen'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { OfflineIndicator } from '../OfflineIndicator/OfflineIndicator'
 import { PeopleMenuAvatar } from './PeopleMenuAvatar'
 import { PeopleMenuItem } from './PeopleMenuItem'
 import { PeopleMenuMore } from './PeopleMenuMore'
@@ -32,12 +30,6 @@ export function PeopleMenu({ children }: PeopleMenuProps) {
 	const breakpoint = useBreakpoint()
 	const maxAvatars = breakpoint <= PORTRAIT_BREAKPOINT.MOBILE_XS ? 1 : 5
 
-	const collaborationStatus = useCollaborationStatus()
-
-	if (collaborationStatus === 'offline') {
-		return <OfflineIndicator />
-	}
-
 	if (!userIds.length) return null
 
 	return (

package/src/lib/ui/components/Toolbar/AltTextEditor.tsx

@@ -1,4 +1,4 @@
-import { ExtractShapeByProps, preventDefault, TLShape, TLShapeId, useEditor } from '@tldraw/editor'
+import { preventDefault, TLShape, TLShapeId, useEditor } from '@tldraw/editor'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { useUiEvents } from '../../context/events'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
@@ -31,7 +31,7 @@ export function AltTextEditor({ shapeId, onClose, source }: AltTextEditorProps)
 
 	const handleComplete = () => {
 		trackEvent('set-alt-text', { source })
-		const shape = editor.getShape<ExtractShapeByProps<{ altText: string }>>(shapeId)
+		const shape = editor.getShape<TLShape & { props: { altText: string } }>(shapeId)
 		if (!shape) return
 		editor.updateShapes([
 			{

package/src/lib/ui/components/Toolbar/DefaultImageToolbar.tsx

@@ -63,7 +63,7 @@ function ContextualToolbarInner({
 	)
 	const camera = useValue('camera', () => editor.getCamera(), [editor])
 	const isInCropTool = useValue('editor path', () => editor.isIn('select.crop.'), [editor])
-	const previousSelectionBounds = useRef<Box | undefined>(undefined)
+	const previousSelectionBounds = useRef<Box | undefined>()
 	const handleManipulatingEnd = useCallback(() => {
 		editor.setCroppingShape(null)
 		editor.setCurrentTool('select.idle')

package/src/lib/ui/components/Toolbar/DefaultRichTextToolbar.tsx

@@ -38,7 +38,7 @@ function ContextualToolbarInner({
 }) {
 	const { isEditingLink, onEditLinkStart, onEditLinkClose } = useEditingLinkBehavior(textEditor)
 	const [currentSelection, setCurrentSelection] = useState<Range | null>(null)
-	const previousSelectionBounds = useRef<Box | undefined>(undefined)
+	const previousSelectionBounds = useRef<Box | undefined>()
 	const isMousingDown = useIsMousingDownOnTextEditor(textEditor)
 	const msg = useTranslation()
 

package/src/lib/ui/components/TopPanel/CenteredTopPanelContainer.tsx

@@ -3,7 +3,7 @@ import { useBreakpoint } from '../../context/breakpoints'
 
 /** @public */
 export interface CenteredTopPanelContainerProps {
-	children?: ReactNode
+	children: ReactNode
 	maxWidth?: number
 	ignoreRightWidth?: number
 	stylePanelWidth?: number

package/src/lib/ui/components/TopPanel/DefaultTopPanel.tsx

@@ -0,0 +1,10 @@
+import { useCollaborationStatus } from '../../hooks/useCollaborationStatus'
+import { OfflineIndicator } from '../OfflineIndicator/OfflineIndicator'
+import { CenteredTopPanelContainer } from './CenteredTopPanelContainer'
+
+/** @public @react */
+export function DefaultTopPanel() {
+	const isOffline = useCollaborationStatus() === 'offline'
+
+	return <CenteredTopPanelContainer>{isOffline && <OfflineIndicator />}</CenteredTopPanelContainer>
+}

package/src/lib/ui/components/menu-items.tsx

@@ -1,4 +1,12 @@
-import { TLPageId, useEditor, useValue } from '@tldraw/editor'
+import {
+	TLBookmarkShape,
+	TLEmbedShape,
+	TLFrameShape,
+	TLImageShape,
+	TLPageId,
+	useEditor,
+	useValue,
+} from '@tldraw/editor'
 import { supportsDownloadingOriginal } from '../context/actions'
 import { useUiEvents } from '../context/events'
 import { useToasts } from '../context/toasts'
@@ -56,7 +64,7 @@ export function FlattenMenuItem() {
 			const selectedShapeIds = editor.getSelectedShapeIds()
 			if (selectedShapeIds.length === 0) return false
 			const onlySelectedShape = editor.getOnlySelectedShape()
-			if (onlySelectedShape && editor.isShapeOfType(onlySelectedShape, 'image')) {
+			if (onlySelectedShape && editor.isShapeOfType<TLImageShape>(onlySelectedShape, 'image')) {
 				return false
 			}
 			return true
@@ -109,7 +117,7 @@ export function RemoveFrameMenuItem() {
 		() => {
 			const selectedShapes = editor.getSelectedShapes()
 			if (selectedShapes.length === 0) return false
-			return selectedShapes.every((shape) => editor.isShapeOfType(shape, 'frame'))
+			return selectedShapes.every((shape) => editor.isShapeOfType<TLFrameShape>(shape, 'frame'))
 		},
 		[editor]
 	)
@@ -127,7 +135,7 @@ export function FitFrameToContentMenuItem() {
 			const onlySelectedShape = editor.getOnlySelectedShape()
 			if (!onlySelectedShape) return false
 			return (
-				editor.isShapeOfType(onlySelectedShape, 'frame') &&
+				editor.isShapeOfType<TLFrameShape>(onlySelectedShape, 'frame') &&
 				editor.getSortedChildIdsForParent(onlySelectedShape).length > 0
 			)
 		},
@@ -182,9 +190,7 @@ export function UnlockAllMenuItem() {
 /** @public @react */
 export function ZoomTo100MenuItem() {
 	const editor = useEditor()
-	const isZoomedTo100 = useValue('zoomed to 100', () => editor.getEfficientZoomLevel() === 1, [
-		editor,
-	])
+	const isZoomedTo100 = useValue('zoomed to 100', () => editor.getZoomLevel() === 1, [editor])
 
 	return <TldrawUiMenuActionItem actionId="zoom-to-100" noClose disabled={isZoomedTo100} />
 }
@@ -512,7 +518,7 @@ export function ConvertToBookmarkMenuItem() {
 			const onlySelectedShape = editor.getOnlySelectedShape()
 			if (!onlySelectedShape) return false
 			return !!(
-				editor.isShapeOfType(onlySelectedShape, 'embed') &&
+				editor.isShapeOfType<TLEmbedShape>(onlySelectedShape, 'embed') &&
 				onlySelectedShape.props.url &&
 				!editor.isShapeOrAncestorLocked(onlySelectedShape)
 			)
@@ -536,7 +542,7 @@ export function ConvertToEmbedMenuItem() {
 			const onlySelectedShape = editor.getOnlySelectedShape()
 			if (!onlySelectedShape) return false
 			return !!(
-				editor.isShapeOfType(onlySelectedShape, 'bookmark') &&
+				editor.isShapeOfType<TLBookmarkShape>(onlySelectedShape, 'bookmark') &&
 				onlySelectedShape.props.url &&
 				getEmbedDefinition(onlySelectedShape.props.url) &&
 				!editor.isShapeOrAncestorLocked(onlySelectedShape)

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

@@ -52,8 +52,8 @@ export const TldrawUiContextualToolbar = ({
 	const editor = useEditor()
 	const toolbarRef = useRef<HTMLDivElement>(null)
 
-	usePassThroughWheelEvents(toolbarRef as RefObject<HTMLDivElement | null>)
-	usePassThroughMouseOverEvents(toolbarRef as RefObject<HTMLDivElement | null>)
+	usePassThroughWheelEvents(toolbarRef as RefObject<HTMLDivElement>)
+	usePassThroughMouseOverEvents(toolbarRef as RefObject<HTMLDivElement>)
 
 	const { isVisible, isInteractive, hide, show, position, move } =
 		useToolbarVisibilityStateMachine(changeOnlyWhenYChanges)
@@ -105,9 +105,7 @@ export const TldrawUiContextualToolbar = ({
 					// to have the last updated position in page space, so that we could convert
 					// it to screen space and update it here
 					const elm = toolbarRef.current
-					if (elm) {
-						elm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)
-					}
+					elm.style.setProperty('transform', `translate(${position.x}px, ${position.y}px)`)
 				} else {
 					const moveImmediately = lastContentSizeUpdateCounter !== nextContentSizeUpdateCounter
 					// Schedule a move to its next location

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

@@ -3,7 +3,7 @@ import { Slider as _Slider } from 'radix-ui'
 import React, { useCallback, useEffect, useState } from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../hooks/useTranslation/useTranslation'
-import { hideAllTooltips, TldrawUiTooltip } from './TldrawUiTooltip'
+import { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'
 
 /** @public */
 export interface TLUiSliderProps {
@@ -52,7 +52,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 	)
 
 	const handlePointerDown = useCallback(() => {
-		hideAllTooltips()
+		tooltipManager.hideAllTooltips()
 		onHistoryMark?.('click slider')
 	}, [onHistoryMark])
 

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

@@ -1,12 +1,4 @@
-import {
-	assert,
-	atom,
-	Editor,
-	tlenvReactive,
-	uniqueId,
-	useMaybeEditor,
-	useValue,
-} from '@tldraw/editor'
+import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'
 import { Tooltip as _Tooltip } from 'radix-ui'
 import React, {
 	createContext,
@@ -14,6 +6,7 @@ import React, {
 	ReactNode,
 	useContext,
 	useEffect,
+	useLayoutEffect,
 	useRef,
 	useState,
 } from 'react'
@@ -32,7 +25,7 @@ export interface TldrawUiTooltipProps {
 	delayDuration?: number
 }
 
-interface TooltipData {
+interface CurrentTooltip {
 	id: string
 	content: ReactNode
 	side: 'top' | 'right' | 'bottom' | 'left'
@@ -42,25 +35,11 @@ interface TooltipData {
 	delayDuration: number
 }
 
-// State machine states
-type TooltipState =
-	| { name: 'idle' }
-	| { name: 'pointer_down' }
-	| { name: 'showing'; tooltip: TooltipData }
-	| { name: 'waiting_to_hide'; tooltip: TooltipData; timeoutId: number }
-
-// State machine events
-type TooltipEvent =
-	| { type: 'pointer_down' }
-	| { type: 'pointer_up' }
-	| { type: 'show'; tooltip: TooltipData }
-	| { type: 'hide'; tooltipId: string; editor: Editor | null; instant: boolean }
-	| { type: 'hide_all' }
-
-// Singleton tooltip manager using explicit state machine
+// Singleton tooltip manager
 class TooltipManager {
 	private static instance: TooltipManager | null = null
-	private state = atom<TooltipState>('tooltip state', { name: 'idle' })
+	private currentTooltip = atom<CurrentTooltip | null>('current tooltip', null)
+	private destroyTimeoutId: number | null = null
 
 	static getInstance(): TooltipManager {
 		if (!TooltipManager.instance) {
@@ -69,117 +48,86 @@ class TooltipManager {
 		return TooltipManager.instance
 	}
 
-	hideAllTooltips() {
-		this.handleEvent({ type: 'hide_all' })
-	}
-
-	handleEvent(event: TooltipEvent) {
-		const currentState = this.state.get()
-
-		switch (event.type) {
-			case 'pointer_down': {
-				// Transition to pointer_down from any state
-				if (currentState.name === 'waiting_to_hide') {
-					clearTimeout(currentState.timeoutId)
-				}
-				this.state.set({ name: 'pointer_down' })
-				break
-			}
-
-			case 'pointer_up': {
-				// Only transition from pointer_down to idle
-				if (currentState.name === 'pointer_down') {
-					this.state.set({ name: 'idle' })
-				}
-				break
-			}
-
-			case 'show': {
-				// Don't show tooltips while pointer is down
-				if (currentState.name === 'pointer_down') {
-					return
-				}
+	showTooltip(
+		tooltipId: string,
+		content: string | React.ReactNode,
+		targetElement: HTMLElement,
+		side: 'top' | 'right' | 'bottom' | 'left',
+		sideOffset: number,
+		showOnMobile: boolean,
+		delayDuration: number
+	) {
+		// Clear any existing destroy timeout
+		if (this.destroyTimeoutId) {
+			clearTimeout(this.destroyTimeoutId)
+			this.destroyTimeoutId = null
+		}
 
-				// Clear any existing timeout if transitioning from waiting_to_hide
-				if (currentState.name === 'waiting_to_hide') {
-					clearTimeout(currentState.timeoutId)
-				}
+		// Update current tooltip
+		this.currentTooltip.set({
+			id: tooltipId,
+			content,
+			side,
+			sideOffset,
+			showOnMobile,
+			targetElement,
+			delayDuration,
+		})
+	}
 
-				// Transition to showing state
-				this.state.set({ name: 'showing', tooltip: event.tooltip })
-				break
+	updateCurrentTooltip(tooltipId: string, update: (tooltip: CurrentTooltip) => CurrentTooltip) {
+		this.currentTooltip.update((tooltip) => {
+			if (tooltip?.id === tooltipId) {
+				return update(tooltip)
 			}
+			return tooltip
+		})
+	}
 
-			case 'hide': {
-				const { tooltipId, editor, instant } = event
-
-				// Only hide if the tooltip matches
-				if (currentState.name === 'showing' && currentState.tooltip.id === tooltipId) {
-					if (editor && !instant) {
-						// Transition to waiting_to_hide state
-						const timeoutId = editor.timers.setTimeout(() => {
-							const state = this.state.get()
-							if (state.name === 'waiting_to_hide' && state.tooltip.id === tooltipId) {
-								this.state.set({ name: 'idle' })
-							}
-						}, 300)
-						this.state.set({
-							name: 'waiting_to_hide',
-							tooltip: currentState.tooltip,
-							timeoutId,
-						})
-					} else {
-						this.state.set({ name: 'idle' })
-					}
-				} else if (
-					currentState.name === 'waiting_to_hide' &&
-					currentState.tooltip.id === tooltipId
-				) {
-					// Already waiting to hide, make it instant if requested
-					if (instant) {
-						clearTimeout(currentState.timeoutId)
-						this.state.set({ name: 'idle' })
-					}
-				}
-				break
+	hideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {
+		const hide = () => {
+			// Only hide if this is the current tooltip
+			if (this.currentTooltip.get()?.id === tooltipId) {
+				this.currentTooltip.set(null)
+				this.destroyTimeoutId = null
 			}
+		}
 
-			case 'hide_all': {
-				if (currentState.name === 'waiting_to_hide') {
-					clearTimeout(currentState.timeoutId)
-				}
-				// Preserve pointer_down state if that's the current state
-				if (currentState.name === 'pointer_down') {
-					return
-				}
-				this.state.set({ name: 'idle' })
-				break
-			}
+		if (editor && !instant) {
+			// Start destroy timeout (1 second)
+			this.destroyTimeoutId = editor.timers.setTimeout(hide, 300)
+		} else {
+			hide()
 		}
 	}
 
-	getCurrentTooltipData(): TooltipData | null {
-		const currentState = this.state.get()
-		let tooltip: TooltipData | null = null
+	hideAllTooltips() {
+		this.currentTooltip.set(null)
+		this.destroyTimeoutId = null
+	}
 
-		if (currentState.name === 'showing') {
-			tooltip = currentState.tooltip
-		} else if (currentState.name === 'waiting_to_hide') {
-			tooltip = currentState.tooltip
-		}
+	getCurrentTooltipData() {
+		const currentTooltip = this.currentTooltip.get()
+		if (!currentTooltip) return null
+		if (!this.supportsHover() && !currentTooltip.showOnMobile) return null
+		return currentTooltip
+	}
 
-		if (!tooltip) return null
-		if (tlenvReactive.get().isCoarsePointer && !tooltip.showOnMobile) return null
-		return tooltip
+	private supportsHoverAtom: Atom<boolean> | null = null
+	supportsHover() {
+		if (!this.supportsHoverAtom) {
+			const mediaQuery = window.matchMedia('(hover: hover)')
+			const supportsHover = atom('has hover', mediaQuery.matches)
+			this.supportsHoverAtom = supportsHover
+			mediaQuery.addEventListener('change', (e) => {
+				supportsHover.set(e.matches)
+			})
+		}
+		return this.supportsHoverAtom.get()
 	}
 }
 
-const tooltipManager = TooltipManager.getInstance()
-
-/** @public */
-export function hideAllTooltips() {
-	tooltipManager.hideAllTooltips()
-}
+export const tooltipManager = TooltipManager.getInstance()
 
 // Context for the tooltip singleton
 const TooltipSingletonContext = createContext<boolean>(false)
@@ -219,19 +167,14 @@ function TooltipSingleton() {
 	// Hide tooltip when camera is moving (panning/zooming)
 	useEffect(() => {
 		if (cameraState === 'moving' && isOpen && currentTooltip) {
-			tooltipManager.handleEvent({
-				type: 'hide',
-				tooltipId: currentTooltip.id,
-				editor,
-				instant: true,
-			})
+			tooltipManager.hideTooltip(editor, currentTooltip.id, true)
 		}
 	}, [cameraState, isOpen, currentTooltip, editor])
 
 	useEffect(() => {
 		function handleKeyDown(event: KeyboardEvent) {
 			if (event.key === 'Escape' && currentTooltip && isOpen) {
-				hideAllTooltips()
+				tooltipManager.hideTooltip(editor, currentTooltip.id)
 				event.stopPropagation()
 			}
 		}
@@ -240,29 +183,7 @@ function TooltipSingleton() {
 		return () => {
 			document.removeEventListener('keydown', handleKeyDown, { capture: true })
 		}
-	}, [currentTooltip, isOpen])
-
-	// Hide tooltip and prevent new ones from opening while pointer is down
-	useEffect(() => {
-		function handlePointerDown() {
-			tooltipManager.handleEvent({ type: 'pointer_down' })
-		}
-
-		function handlePointerUp() {
-			tooltipManager.handleEvent({ type: 'pointer_up' })
-		}
-
-		document.addEventListener('pointerdown', handlePointerDown, { capture: true })
-		document.addEventListener('pointerup', handlePointerUp, { capture: true })
-		document.addEventListener('pointercancel', handlePointerUp, { capture: true })
-		return () => {
-			document.removeEventListener('pointerdown', handlePointerDown, { capture: true })
-			document.removeEventListener('pointerup', handlePointerUp, { capture: true })
-			document.removeEventListener('pointercancel', handlePointerUp, { capture: true })
-			// Reset pointer state on unmount to prevent stuck state
-			tooltipManager.handleEvent({ type: 'pointer_up' })
-		}
-	}, [])
+	}, [editor, currentTooltip, isOpen])
 
 	// Update open state and trigger position
 	useEffect(() => {
@@ -359,16 +280,23 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			const currentTooltipId = tooltipId.current
 			return () => {
 				if (hasProvider) {
-					tooltipManager.handleEvent({
-						type: 'hide',
-						tooltipId: currentTooltipId,
-						editor,
-						instant: true,
-					})
+					tooltipManager.hideTooltip(editor, currentTooltipId, true)
 				}
 			}
 		}, [editor, hasProvider])
 
+		useLayoutEffect(() => {
+			if (hasProvider && tooltipManager.getCurrentTooltipData()?.id === tooltipId.current) {
+				tooltipManager.updateCurrentTooltip(tooltipId.current, (tooltip) => ({
+					...tooltip,
+					content,
+					side: sideToUse,
+					sideOffset,
+					showOnMobile,
+				}))
+			}
+		}, [content, sideToUse, sideOffset, showOnMobile, hasProvider])
+
 		// Don't show tooltip if disabled, no content, or enhanced accessibility mode is disabled
 		if (disabled || !content) {
 			return <>{children}</>
@@ -410,66 +338,43 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 		const child = React.Children.only(children)
 		assert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')
 
-		const childElement = child as React.ReactElement<{
-			onMouseEnter?(event: React.MouseEvent<HTMLElement>): void
-			onMouseLeave?(event: React.MouseEvent<HTMLElement>): void
-			onFocus?(event: React.FocusEvent<HTMLElement>): void
-			onBlur?(event: React.FocusEvent<HTMLElement>): void
-		}>
-
 		const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
-			childElement.props.onMouseEnter?.(event)
-			tooltipManager.handleEvent({
-				type: 'show',
-				tooltip: {
-					id: tooltipId.current,
-					content,
-					targetElement: event.currentTarget as HTMLElement,
-					side: sideToUse,
-					sideOffset,
-					showOnMobile,
-					delayDuration: delayDurationToUse,
-				},
-			})
+			child.props.onMouseEnter?.(event)
+			tooltipManager.showTooltip(
+				tooltipId.current,
+				content,
+				event.currentTarget as HTMLElement,
+				sideToUse,
+				sideOffset,
+				showOnMobile,
+				delayDurationToUse
+			)
 		}
 
 		const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
-			childElement.props.onMouseLeave?.(event)
-			tooltipManager.handleEvent({
-				type: 'hide',
-				tooltipId: tooltipId.current,
-				editor,
-				instant: false,
-			})
+			child.props.onMouseLeave?.(event)
+			tooltipManager.hideTooltip(editor, tooltipId.current)
 		}
 
 		const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
-			childElement.props.onFocus?.(event)
-			tooltipManager.handleEvent({
-				type: 'show',
-				tooltip: {
-					id: tooltipId.current,
-					content,
-					targetElement: event.currentTarget as HTMLElement,
-					side: sideToUse,
-					sideOffset,
-					showOnMobile,
-					delayDuration: delayDurationToUse,
-				},
-			})
+			child.props.onFocus?.(event)
+			tooltipManager.showTooltip(
+				tooltipId.current,
+				content,
+				event.currentTarget as HTMLElement,
+				sideToUse,
+				sideOffset,
+				showOnMobile,
+				delayDurationToUse
+			)
 		}
 
 		const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
-			childElement.props.onBlur?.(event)
-			tooltipManager.handleEvent({
-				type: 'hide',
-				tooltipId: tooltipId.current,
-				editor,
-				instant: false,
-			})
+			child.props.onBlur?.(event)
+			tooltipManager.hideTooltip(editor, tooltipId.current)
 		}
 
-		const childrenWithHandlers = React.cloneElement(childElement, {
+		const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {
 			onMouseEnter: handleMouseEnter,
 			onMouseLeave: handleMouseLeave,
 			onFocus: handleFocus,

package/src/lib/ui/components/primitives/menus/TldrawUiMenuActionCheckboxItem.tsx

@@ -17,5 +17,5 @@ export function TldrawUiMenuActionCheckboxItem({
 	const actions = useActions()
 	const action = actions[actionId]
 	if (!action) return null
-	return <TldrawUiMenuCheckboxItem {...(action as TLUiMenuCheckboxItemProps)} {...rest} />
+	return <TldrawUiMenuCheckboxItem {...action} {...rest} />
 }

package/src/lib/ui/components/primitives/menus/TldrawUiMenuActionItem.tsx

@@ -11,5 +11,5 @@ export function TldrawUiMenuActionItem({ actionId = '', ...rest }: TLUiMenuActio
 	const actions = useActions()
 	const action = actions[actionId]
 	if (!action) return null
-	return <TldrawUiMenuItem {...(action as TLUiMenuItemProps)} {...rest} />
+	return <TldrawUiMenuItem {...action} {...rest} />
 }