tldraw 3.16.0-canary.a03de714c746 → 3.16.0-canary.a2604843117c

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

@@ -1,7 +1,16 @@
-import { Editor, uniqueId, useMaybeEditor, Vec } from '@tldraw/editor'
+import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'
 import { Tooltip as _Tooltip } from 'radix-ui'
-import React, { createContext, useContext, useEffect, useRef, useState } from 'react'
-import { usePrefersReducedMotion } from '../../../shapes/shared/usePrefersReducedMotion'
+import React, {
+	createContext,
+	forwardRef,
+	ReactNode,
+	useContext,
+	useEffect,
+	useLayoutEffect,
+	useRef,
+	useState,
+} from 'react'
+import { useTldrawUiOrientation } from './layout'
 
 const DEFAULT_TOOLTIP_DELAY_MS = 700
 
@@ -12,19 +21,25 @@ export interface TldrawUiTooltipProps {
 	side?: 'top' | 'right' | 'bottom' | 'left'
 	sideOffset?: number
 	disabled?: boolean
+	showOnMobile?: boolean
+	delayDuration?: number
+}
+
+interface CurrentTooltip {
+	id: string
+	content: ReactNode
+	side: 'top' | 'right' | 'bottom' | 'left'
+	sideOffset: number
+	showOnMobile: boolean
+	targetElement: HTMLElement
+	delayDuration: number
 }
 
 // Singleton tooltip manager
 class TooltipManager {
 	private static instance: TooltipManager | null = null
-	private currentTooltipId: string | null = null
-	private currentContent: string | React.ReactNode = ''
-	private currentSide: 'top' | 'right' | 'bottom' | 'left' = 'bottom'
-	private currentSideOffset: number = 5
+	private currentTooltip = atom<CurrentTooltip | null>('current tooltip', null)
 	private destroyTimeoutId: number | null = null
-	private subscribers: Set<() => void> = new Set()
-	private activeElement: HTMLElement | null = null
-	private editor: Editor | null = null
 
 	static getInstance(): TooltipManager {
 		if (!TooltipManager.instance) {
@@ -33,25 +48,14 @@ class TooltipManager {
 		return TooltipManager.instance
 	}
 
-	setEditor(editor: Editor | null) {
-		this.editor = editor
-	}
-
-	subscribe(callback: () => void): () => void {
-		this.subscribers.add(callback)
-		return () => this.subscribers.delete(callback)
-	}
-
-	private notify() {
-		this.subscribers.forEach((callback) => callback())
-	}
-
 	showTooltip(
 		tooltipId: string,
 		content: string | React.ReactNode,
-		element: HTMLElement,
-		side: 'top' | 'right' | 'bottom' | 'left' = 'bottom',
-		sideOffset: number = 5
+		targetElement: HTMLElement,
+		side: 'top' | 'right' | 'bottom' | 'left',
+		sideOffset: number,
+		showOnMobile: boolean,
+		delayDuration: number
 	) {
 		// Clear any existing destroy timeout
 		if (this.destroyTimeoutId) {
@@ -60,43 +64,70 @@ class TooltipManager {
 		}
 
 		// Update current tooltip
-		this.currentTooltipId = tooltipId
-		this.currentContent = content
-		this.currentSide = side
-		this.currentSideOffset = sideOffset
-		this.activeElement = element
+		this.currentTooltip.set({
+			id: tooltipId,
+			content,
+			side,
+			sideOffset,
+			showOnMobile,
+			targetElement,
+			delayDuration,
+		})
+	}
 
-		this.notify()
+	updateCurrentTooltip(tooltipId: string, update: (tooltip: CurrentTooltip) => CurrentTooltip) {
+		this.currentTooltip.update((tooltip) => {
+			if (tooltip?.id === tooltipId) {
+				return update(tooltip)
+			}
+			return tooltip
+		})
 	}
 
-	hideTooltip(tooltipId: string) {
-		// Only hide if this is the current tooltip
-		if (this.currentTooltipId === tooltipId) {
-			// Start destroy timeout (1 second)
-			if (this.editor) {
-				this.destroyTimeoutId = this.editor.timers.setTimeout(() => {
-					this.currentTooltipId = null
-					this.currentContent = ''
-					this.activeElement = null
-					this.destroyTimeoutId = null
-					this.notify()
-				}, 300)
+	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
 			}
 		}
+
+		if (editor && !instant) {
+			// Start destroy timeout (1 second)
+			this.destroyTimeoutId = editor.timers.setTimeout(hide, 300)
+		} else {
+			hide()
+		}
+	}
+
+	hideAllTooltips() {
+		this.currentTooltip.set(null)
+		this.destroyTimeoutId = null
 	}
 
 	getCurrentTooltipData() {
-		return {
-			id: this.currentTooltipId,
-			content: this.currentContent,
-			side: this.currentSide,
-			sideOffset: this.currentSideOffset,
-			element: this.activeElement,
+		const currentTooltip = this.currentTooltip.get()
+		if (!currentTooltip) return null
+		if (!this.supportsHover() && !currentTooltip.showOnMobile) return null
+		return currentTooltip
+	}
+
+	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()
+export const tooltipManager = TooltipManager.getInstance()
 
 // Context for the tooltip singleton
 const TooltipSingletonContext = createContext<boolean>(false)
@@ -120,66 +151,48 @@ export function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderPro
 
 // The singleton tooltip component that renders once
 function TooltipSingleton() {
-	const editor = useMaybeEditor()
-	const [, forceUpdate] = useState({})
 	const [isOpen, setIsOpen] = useState(false)
 	const triggerRef = useRef<HTMLDivElement>(null)
-	const previousPositionRef = useRef<{ x: number; y: number } | null>(null)
-	const prefersReducedMotion = usePrefersReducedMotion()
-	const [shouldAnimate, setShouldAnimate] = useState(false)
 	const isFirstShowRef = useRef(true)
-	const showTimeoutRef = useRef<number | null>(null)
+	const editor = useMaybeEditor()
 
-	// Set editor in tooltip manager
-	useEffect(() => {
-		tooltipManager.setEditor(editor)
-	}, [editor])
+	const currentTooltip = useValue(
+		'current tooltip',
+		() => tooltipManager.getCurrentTooltipData(),
+		[]
+	)
 
-	// Subscribe to tooltip manager updates
-	useEffect(() => {
-		const unsubscribe = tooltipManager.subscribe(() => {
-			forceUpdate({})
-		})
-		return unsubscribe
-	}, [])
+	const cameraState = useValue('camera state', () => editor?.getCameraState(), [editor])
 
-	const tooltipData = tooltipManager.getCurrentTooltipData()
+	// Hide tooltip when camera is moving (panning/zooming)
+	useEffect(() => {
+		if (cameraState === 'moving' && isOpen && currentTooltip) {
+			tooltipManager.hideTooltip(editor, currentTooltip.id, true)
+		}
+	}, [cameraState, isOpen, currentTooltip, editor])
 
-	// Update open state and trigger position
 	useEffect(() => {
-		const shouldBeOpen = Boolean(tooltipData.id && tooltipData.element)
+		function handleKeyDown(event: KeyboardEvent) {
+			if (event.key === 'Escape' && currentTooltip && isOpen) {
+				tooltipManager.hideTooltip(editor, currentTooltip.id)
+				event.stopPropagation()
+			}
+		}
 
-		// Clear any existing show timeout
-		if (showTimeoutRef.current) {
-			clearTimeout(showTimeoutRef.current)
-			showTimeoutRef.current = null
+		document.addEventListener('keydown', handleKeyDown, { capture: true })
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown, { capture: true })
 		}
+	}, [editor, currentTooltip, isOpen])
 
-		if (shouldBeOpen && tooltipData.element && triggerRef.current) {
+	// Update open state and trigger position
+	useEffect(() => {
+		let timer: ReturnType<typeof setTimeout> | null = null
+		if (currentTooltip && triggerRef.current) {
 			// Position the invisible trigger element over the active element
-			const activeRect = tooltipData.element.getBoundingClientRect()
+			const activeRect = currentTooltip.targetElement.getBoundingClientRect()
 			const trigger = triggerRef.current
 
-			const newPosition = {
-				x: activeRect.left + activeRect.width / 2,
-				y: activeRect.top + activeRect.height / 2,
-			}
-
-			// Determine if we should animate
-			let shouldAnimateCheck = false
-			if (previousPositionRef.current) {
-				const isNearPrevious = Vec.DistMin(previousPositionRef.current, newPosition, 200)
-				// Only animate if the distance is less than 200px (nearby tooltips)
-				shouldAnimateCheck =
-					!prefersReducedMotion &&
-					isNearPrevious &&
-					Math.abs(newPosition.y - previousPositionRef.current.y) < 50
-			}
-			// Don't animate on initial show (previousPositionRef.current is null)
-
-			setShouldAnimate(isFirstShowRef.current ? false : shouldAnimateCheck)
-			previousPositionRef.current = newPosition
-
 			trigger.style.position = 'fixed'
 			trigger.style.left = `${activeRect.left}px`
 			trigger.style.top = `${activeRect.top}px`
@@ -189,27 +202,31 @@ 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
-				}, editor.options.tooltipDelayMs)
+				}, currentTooltip.delayDuration)
 			} else {
 				// Subsequent tooltips show immediately
 				setIsOpen(true)
 			}
-		} else if (!shouldBeOpen) {
+		} else {
 			// Hide tooltip immediately
 			setIsOpen(false)
-			// Reset position tracking when tooltip closes
-			previousPositionRef.current = null
-			setShouldAnimate(false)
 			// Reset first show state after tooltip is hidden
 			isFirstShowRef.current = true
 		}
-	}, [tooltipData.id, tooltipData.element, editor, prefersReducedMotion])
 
-	if (!tooltipData.id) {
+		return () => {
+			if (timer !== null) {
+				clearTimeout(timer)
+			}
+		}
+	}, [currentTooltip])
+
+	if (!currentTooltip) {
 		return null
 	}
 
@@ -220,14 +237,13 @@ function TooltipSingleton() {
 			</_Tooltip.Trigger>
 			<_Tooltip.Content
 				className="tlui-tooltip"
-				data-should-animate={shouldAnimate}
-				side={tooltipData.side}
-				sideOffset={tooltipData.sideOffset}
+				side={currentTooltip.side}
+				sideOffset={currentTooltip.sideOffset}
 				avoidCollisions
 				collisionPadding={8}
 				dir="ltr"
 			>
-				{tooltipData.content}
+				{currentTooltip.content}
 				<_Tooltip.Arrow className="tlui-tooltip__arrow" />
 			</_Tooltip.Content>
 		</_Tooltip.Root>
@@ -235,79 +251,129 @@ function TooltipSingleton() {
 }
 
 /** @public @react */
-export function TldrawUiTooltip({
-	children,
-	content,
-	side = 'bottom',
-	sideOffset = 5,
-	disabled = false,
-}: TldrawUiTooltipProps) {
-	const editor = useMaybeEditor()
-	const tooltipId = useRef<string>(uniqueId())
-	const hasProvider = useContext(TooltipSingletonContext)
+export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(
+	(
+		{
+			children,
+			content,
+			side,
+			sideOffset = 5,
+			disabled = false,
+			showOnMobile = false,
+			delayDuration,
+		},
+		ref
+	) => {
+		const editor = useMaybeEditor()
+		const tooltipId = useRef<string>(uniqueId())
+		const hasProvider = useContext(TooltipSingletonContext)
+		const showUiLabels = useValue('showUiLabels', () => editor?.user.getShowUiLabels(), [editor])
+
+		const orientationCtx = useTldrawUiOrientation()
+		const sideToUse = side ?? orientationCtx.tooltipSide
+
+		useEffect(() => {
+			const currentTooltipId = tooltipId.current
+			return () => {
+				if (hasProvider) {
+					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 UI labels are disabled
-	if (disabled || !content) {
-		return <>{children}</>
-	}
+		// Don't show tooltip if disabled, no content, or UI labels are disabled
+		if (disabled || !content) {
+			return <>{children}</>
+		}
 
-	// Fallback to old behavior if no provider
-	if (!hasProvider) {
-		return (
-			<_Tooltip.Root
-				delayDuration={editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS}
-				disableHoverableContent
-			>
-				<_Tooltip.Trigger asChild>{children}</_Tooltip.Trigger>
-				<_Tooltip.Content
-					className="tlui-tooltip"
-					side={side}
-					sideOffset={sideOffset}
-					avoidCollisions
-					collisionPadding={8}
-					dir="ltr"
-				>
-					{content}
-					<_Tooltip.Arrow className="tlui-tooltip__arrow" />
-				</_Tooltip.Content>
-			</_Tooltip.Root>
-		)
-	}
+		let delayDurationToUse
+		if (showUiLabels) {
+			delayDurationToUse = 0
+		} else {
+			delayDurationToUse =
+				delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+		}
 
-	const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
-		tooltipManager.showTooltip(
-			tooltipId.current,
-			content,
-			event.currentTarget as HTMLElement,
-			side,
-			sideOffset
-		)
-	}
+		// Fallback to old behavior if no provider
+		if (!hasProvider || showUiLabels) {
+			return (
+				<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent={!showUiLabels}>
+					<_Tooltip.Trigger asChild ref={ref}>
+						{children}
+					</_Tooltip.Trigger>
+					<_Tooltip.Content
+						className="tlui-tooltip"
+						side={sideToUse}
+						sideOffset={sideOffset}
+						avoidCollisions
+						collisionPadding={8}
+						dir="ltr"
+					>
+						{content}
+						<_Tooltip.Arrow className="tlui-tooltip__arrow" />
+					</_Tooltip.Content>
+				</_Tooltip.Root>
+			)
+		}
 
-	const handleMouseLeave = () => {
-		tooltipManager.hideTooltip(tooltipId.current)
-	}
+		const child = React.Children.only(children)
+		assert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')
+
+		const handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {
+			child.props.onMouseEnter?.(event)
+			tooltipManager.showTooltip(
+				tooltipId.current,
+				content,
+				event.currentTarget as HTMLElement,
+				sideToUse,
+				sideOffset,
+				showOnMobile,
+				delayDurationToUse
+			)
+		}
 
-	const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
-		tooltipManager.showTooltip(
-			tooltipId.current,
-			content,
-			event.currentTarget as HTMLElement,
-			side,
-			sideOffset
-		)
-	}
+		const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
+			child.props.onMouseLeave?.(event)
+			tooltipManager.hideTooltip(editor, tooltipId.current)
+		}
 
-	const handleBlur = () => {
-		tooltipManager.hideTooltip(tooltipId.current)
-	}
+		const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
+			child.props.onFocus?.(event)
+			tooltipManager.showTooltip(
+				tooltipId.current,
+				content,
+				event.currentTarget as HTMLElement,
+				sideToUse,
+				sideOffset,
+				showOnMobile,
+				delayDurationToUse
+			)
+		}
+
+		const handleBlur = (event: React.FocusEvent<HTMLElement>) => {
+			child.props.onBlur?.(event)
+			tooltipManager.hideTooltip(editor, tooltipId.current)
+		}
 
-	const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {
-		onMouseEnter: handleMouseEnter,
-		onMouseLeave: handleMouseLeave,
-		onFocus: handleFocus,
-		onBlur: handleBlur,
-	})
+		const childrenWithHandlers = React.cloneElement(children as React.ReactElement, {
+			onMouseEnter: handleMouseEnter,
+			onMouseLeave: handleMouseLeave,
+			onFocus: handleFocus,
+			onBlur: handleBlur,
+		})
 
-	return childrenWithHandlers
-}
+		return childrenWithHandlers
+	}
+)

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

@@ -0,0 +1,107 @@
+import classNames from 'classnames'
+import { Slot } from 'radix-ui'
+import { HTMLAttributes, ReactNode, createContext, forwardRef, useContext } from 'react'
+
+/** @public */
+export interface TldrawUiOrientationContext {
+	orientation: 'horizontal' | 'vertical'
+	tooltipSide: 'top' | 'right' | 'bottom' | 'left'
+}
+
+const TldrawUiOrientationContext = createContext<TldrawUiOrientationContext>({
+	orientation: 'horizontal',
+	tooltipSide: 'bottom',
+})
+
+/** @public */
+export interface TldrawUiOrientationProviderProps {
+	children: ReactNode
+	orientation: 'horizontal' | 'vertical'
+	tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+}
+/** @public @react */
+export function TldrawUiOrientationProvider({
+	children,
+	orientation,
+	tooltipSide,
+}: TldrawUiOrientationProviderProps) {
+	const prevContext = useTldrawUiOrientation()
+	// generally, we want tooltip side to cascade down through the layout - apart from when the
+	// orientation changes. If the tooltip side is "bottom", and then I include some vertical layout
+	// elements, keeping the tooltip side as bottom will cause the tooltip to overlap elements
+	// stacked on top of each other. In the absence of a tooltip side, we pick a default side based
+	// on the orientation whenever the orientation changes.
+	const tooltipSideToUse =
+		tooltipSide ??
+		(orientation === prevContext.orientation
+			? prevContext.tooltipSide
+			: orientation === 'horizontal'
+				? 'bottom'
+				: 'right')
+
+	return (
+		<TldrawUiOrientationContext.Provider value={{ orientation, tooltipSide: tooltipSideToUse }}>
+			{children}
+		</TldrawUiOrientationContext.Provider>
+	)
+}
+
+/** @public */
+export function useTldrawUiOrientation() {
+	return useContext(TldrawUiOrientationContext)
+}
+
+/** @public */
+export interface TLUiLayoutProps extends HTMLAttributes<HTMLDivElement> {
+	children: ReactNode
+	tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+	asChild?: boolean
+}
+
+/**
+ * A row, usually of UI controls like buttons, select dropdown, checkboxes, etc.
+ *
+ * @public @react
+ */
+export const TldrawUiRow = forwardRef<HTMLDivElement, TLUiLayoutProps>(
+	({ asChild, className, tooltipSide, ...props }, ref) => {
+		const Component = asChild ? Slot.Root : 'div'
+		return (
+			<TldrawUiOrientationProvider orientation="horizontal" tooltipSide={tooltipSide}>
+				<Component ref={ref} className={classNames('tlui-row', className)} {...props} />
+			</TldrawUiOrientationProvider>
+		)
+	}
+)
+
+/**
+ * A column, usually of UI controls like buttons, select dropdown, checkboxes, etc.
+ *
+ * @public @react
+ */
+export const TldrawUiColumn = forwardRef<HTMLDivElement, TLUiLayoutProps>(
+	({ asChild, className, tooltipSide, ...props }, ref) => {
+		const Component = asChild ? Slot.Root : 'div'
+		return (
+			<TldrawUiOrientationProvider orientation="vertical" tooltipSide={tooltipSide}>
+				<Component ref={ref} className={classNames('tlui-column', className)} {...props} />
+			</TldrawUiOrientationProvider>
+		)
+	}
+)
+
+/**
+ * A tight grid 4 elements wide, usually of UI controls like buttons, select dropdown, checkboxes,
+ * etc.
+ *
+ * @public @react */
+export const TldrawUiGrid = forwardRef<HTMLDivElement, TLUiLayoutProps>(
+	({ asChild, className, tooltipSide, ...props }, ref) => {
+		const Component = asChild ? Slot.Root : 'div'
+		return (
+			<TldrawUiOrientationProvider orientation="horizontal" tooltipSide={tooltipSide}>
+				<Component ref={ref} className={classNames('tlui-grid', className)} {...props} />
+			</TldrawUiOrientationProvider>
+		)
+	}
+)

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

@@ -19,6 +19,7 @@ export interface TLUiMenuCheckboxItemProps<
 	kbd?: string
 	title?: string
 	label?: TranslationKey | { [key: string]: TranslationKey }
+	lang?: string
 	readonlyOk?: boolean
 	onSelect(source: TLUiEventSource): Promise<void> | void
 	toggle?: boolean
@@ -34,6 +35,7 @@ export function TldrawUiMenuCheckboxItem<
 	id,
 	kbd,
 	label,
+	lang,
 	readonlyOk,
 	onSelect,
 	toggle = false,
@@ -55,6 +57,7 @@ export function TldrawUiMenuCheckboxItem<
 			return (
 				<_DropdownMenu.CheckboxItem
 					dir="ltr"
+					lang={lang}
 					className="tlui-button tlui-button__menu tlui-button__checkbox"
 					title={labelStr}
 					onSelect={(e) => {
@@ -84,6 +87,7 @@ export function TldrawUiMenuCheckboxItem<
 					key={id}
 					className="tlui-button tlui-button__menu tlui-button__checkbox"
 					dir="ltr"
+					lang={lang}
 					title={labelStr}
 					onSelect={(e) => {
 						onSelect(sourceId)

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

@@ -3,7 +3,6 @@ import { TLUiEventSource } from '../../../context/events'
 
 /** @public */
 export type TLUiMenuContextType =
-	| 'panel'
 	| 'menu'
 	| 'small-icons'
 	| 'context-menu'