tldraw 3.16.0-canary.9a94aba7bcaa → 3.16.0-canary.9abe0dac1e0f

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

@@ -4,7 +4,6 @@ import {
 	clamp,
 	Editor,
 	react,
-	stopEventPropagation,
 	useAtom,
 	useEditor,
 	usePassThroughMouseOverEvents,
@@ -170,9 +169,14 @@ export const TldrawUiContextualToolbar = ({
 			data-visible={false}
 			data-testid="contextual-toolbar"
 			className={classNames('tlui-contextual-toolbar', className)}
-			onPointerDown={stopEventPropagation}
+			onPointerDown={editor.markEventAsHandled}
 		>
-			<TldrawUiToolbar orientation="horizontal" className="tlui-menu" label={label}>
+			<TldrawUiToolbar
+				orientation="horizontal"
+				className="tlui-menu"
+				label={label}
+				tooltipSide="top"
+			>
 				{children}
 			</TldrawUiToolbar>
 		</div>

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

@@ -1,4 +1,4 @@
-import { stopEventPropagation, tlenv, tltime, useMaybeEditor } from '@tldraw/editor'
+import { tlenv, tltime, useMaybeEditor } from '@tldraw/editor'
 import classNames from 'classnames'
 import * as React from 'react'
 import { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'
@@ -35,6 +35,7 @@ export interface TLUiInputProps {
 	shouldManuallyMaintainScrollPositionWhenFocused?: boolean
 	value?: string
 	'data-testid'?: string
+	'aria-label'?: string
 }
 
 /** @public @react */
@@ -60,6 +61,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 			value,
 			'data-testid': dataTestId,
 			disabled,
+			'aria-label': ariaLabel,
 		},
 		ref
 	) {
@@ -118,7 +120,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 						// `onChange` with a duplicated text value.
 						if (isComposing.current) return
 						e.currentTarget.blur()
-						stopEventPropagation(e)
+						e.stopPropagation()
 						onComplete?.(e.currentTarget.value)
 						break
 					}
@@ -126,7 +128,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 						e.currentTarget.value = rInitialValue.current
 						onCancel?.(e.currentTarget.value)
 						e.currentTarget.blur()
-						stopEventPropagation(e)
+						e.stopPropagation()
 						break
 					}
 				}
@@ -198,6 +200,7 @@ export const TldrawUiInput = React.forwardRef<HTMLInputElement, TLUiInputProps>(
 					onCompositionStart={handleCompositionStart}
 					onCompositionEnd={handleCompositionEnd}
 					autoFocus={autoFocus}
+					aria-label={ariaLabel}
 					placeholder={placeholder}
 					value={value}
 					data-testid={dataTestId}

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

@@ -1,7 +1,9 @@
+import { tltime } from '@tldraw/editor'
 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 { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'
 
 /** @public */
 export interface TLUiSliderProps {
@@ -11,7 +13,7 @@ export interface TLUiSliderProps {
 	label: string
 	title: string
 	onValueChange(value: number): void
-	onHistoryMark(id: string): void
+	onHistoryMark?(id: string): void
 	'data-testid'?: string
 	ariaValueModifier?: number
 }
@@ -32,6 +34,7 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 	ref
 ) {
 	const msg = useTranslation()
+	const [titleAndLabel, setTitleAndLabel] = useState('')
 
 	// XXX: Radix starts out our slider with a tabIndex of 0
 	// This causes some tab focusing issues, most prevelant in MobileStylePanel,
@@ -49,9 +52,25 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 	)
 
 	const handlePointerDown = useCallback(() => {
-		onHistoryMark('click slider')
+		tooltipManager.hideAllTooltips()
+		onHistoryMark?.('click slider')
 	}, [onHistoryMark])
 
+	// N.B. This is a bit silly. The Radix slider auto-focuses which
+	// triggers TldrawUiTooltip handleFocus when we dbl-click to edit an image,
+	// which in turn makes the tooltip display prematurely.
+	// This makes it wait until we've focused to show the tooltip.
+	useEffect(() => {
+		const timeout = tltime.setTimeout(
+			'set title and label',
+			() => {
+				setTitleAndLabel(title + ' — ' + msg(label as TLUiTranslationKey))
+			},
+			0
+		)
+		return () => clearTimeout(timeout)
+	}, [label, msg, title])
+
 	// N.B. Annoying. For a11y purposes, we need Tab to work.
 	// For some reason, Radix has some custom behavior here
 	// that interferes with tabbing past the slider and then
@@ -64,36 +83,37 @@ export const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(
 
 	return (
 		<div className="tlui-slider__container">
-			<_Slider.Root
-				data-testid={testId}
-				className="tlui-slider"
-				dir="ltr"
-				min={min ?? 0}
-				max={steps}
-				step={1}
-				value={value !== null ? [value] : undefined}
-				onPointerDown={handlePointerDown}
-				onValueChange={handleValueChange}
-				onKeyDownCapture={handleKeyEvent}
-				onKeyUpCapture={handleKeyEvent}
-				title={title + ' — ' + msg(label as TLUiTranslationKey)}
-			>
-				<_Slider.Track className="tlui-slider__track" dir="ltr">
-					{value !== null && <_Slider.Range className="tlui-slider__range" dir="ltr" />}
-				</_Slider.Track>
-				{value !== null && (
-					<_Slider.Thumb
-						aria-valuemin={(min ?? 0) * ariaValueModifier}
-						aria-valuenow={value * ariaValueModifier}
-						aria-valuemax={steps * ariaValueModifier}
-						aria-label={title + ' — ' + msg(label as TLUiTranslationKey)}
-						className="tlui-slider__thumb"
-						dir="ltr"
-						ref={ref}
-						tabIndex={tabIndex}
-					/>
-				)}
-			</_Slider.Root>
+			<TldrawUiTooltip content={titleAndLabel}>
+				<_Slider.Root
+					data-testid={testId}
+					className="tlui-slider"
+					dir="ltr"
+					min={min ?? 0}
+					max={steps}
+					step={1}
+					value={value !== null ? [value] : undefined}
+					onPointerDown={handlePointerDown}
+					onValueChange={handleValueChange}
+					onKeyDownCapture={handleKeyEvent}
+					onKeyUpCapture={handleKeyEvent}
+				>
+					<_Slider.Track className="tlui-slider__track" dir="ltr">
+						{value !== null && <_Slider.Range className="tlui-slider__range" dir="ltr" />}
+					</_Slider.Track>
+					{value !== null && (
+						<_Slider.Thumb
+							aria-valuemin={(min ?? 0) * ariaValueModifier}
+							aria-valuenow={value * ariaValueModifier}
+							aria-valuemax={steps * ariaValueModifier}
+							aria-label={titleAndLabel}
+							className="tlui-slider__thumb"
+							dir="ltr"
+							ref={ref}
+							tabIndex={tabIndex}
+						/>
+					)}
+				</_Slider.Root>
+			</TldrawUiTooltip>
 		</div>
 	)
 })

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

@@ -71,6 +71,7 @@ export const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToo
 				draggable={false}
 				data-isactive={isActive}
 				{...props}
+				aria-label={props.title}
 				// The tooltip takes care of this.
 				title={undefined}
 				className={classnames('tlui-button', `tlui-button__${type}`, props.className)}
@@ -94,6 +95,7 @@ export interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDi
 	// TODO: fix up this type later
 	defaultValue?: any
 	type: 'single' | 'multiple'
+	asChild?: boolean
 }
 
 /** @public @react */
@@ -101,10 +103,12 @@ export const TldrawUiToolbarToggleGroup = ({
 	children,
 	className,
 	type,
+	asChild,
 	...props
 }: TLUiToolbarToggleGroupProps) => {
 	return (
 		<_Toolbar.ToggleGroup
+			asChild={asChild}
 			type={type}
 			{...props}
 			// TODO: this fixes a bug in Radix until they fix it.
@@ -124,7 +128,7 @@ export interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLBut
 	className?: string
 	type: 'icon' | 'tool'
 	value: string
-	tooltip?: string
+	tooltip?: React.ReactNode
 }
 
 /** @public @react */

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

@@ -6,6 +6,7 @@ import React, {
 	ReactNode,
 	useContext,
 	useEffect,
+	useLayoutEffect,
 	useRef,
 	useState,
 } from 'react'
@@ -20,20 +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 currentTooltip = atom<{
-		id: string
-		content: ReactNode
-		side: 'top' | 'right' | 'bottom' | 'left'
-		sideOffset: number
-		targetElement: HTMLElement
-	} | null>('current tooltip', null)
+	private currentTooltip = atom<CurrentTooltip | null>('current tooltip', null)
 	private destroyTimeoutId: number | null = null
-	private subscribers: Set<() => void> = new Set()
 
 	static getInstance(): TooltipManager {
 		if (!TooltipManager.instance) {
@@ -46,8 +52,10 @@ class TooltipManager {
 		tooltipId: string,
 		content: string | React.ReactNode,
 		targetElement: HTMLElement,
-		side: 'top' | 'right' | 'bottom' | 'left' = 'bottom',
-		sideOffset: number = 5
+		side: 'top' | 'right' | 'bottom' | 'left',
+		sideOffset: number,
+		showOnMobile: boolean,
+		delayDuration: number
 	) {
 		// Clear any existing destroy timeout
 		if (this.destroyTimeoutId) {
@@ -61,7 +69,18 @@ class TooltipManager {
 			content,
 			side,
 			sideOffset,
+			showOnMobile,
 			targetElement,
+			delayDuration,
+		})
+	}
+
+	updateCurrentTooltip(tooltipId: string, update: (tooltip: CurrentTooltip) => CurrentTooltip) {
+		this.currentTooltip.update((tooltip) => {
+			if (tooltip?.id === tooltipId) {
+				return update(tooltip)
+			}
+			return tooltip
 		})
 	}
 
@@ -88,8 +107,10 @@ class TooltipManager {
 	}
 
 	getCurrentTooltipData() {
-		if (!this.supportsHover()) return null
-		return this.currentTooltip.get()
+		const currentTooltip = this.currentTooltip.get()
+		if (!currentTooltip) return null
+		if (!this.supportsHover() && !currentTooltip.showOnMobile) return null
+		return currentTooltip
 	}
 
 	private supportsHoverAtom: Atom<boolean> | null = null
@@ -130,11 +151,10 @@ 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 editor = useMaybeEditor()
 
 	const currentTooltip = useValue(
 		'current tooltip',
@@ -142,14 +162,32 @@ function TooltipSingleton() {
 		[]
 	)
 
-	// Update open state and trigger position
+	const cameraState = useValue('camera state', () => editor?.getCameraState(), [editor])
+
+	// Hide tooltip when camera is moving (panning/zooming)
 	useEffect(() => {
-		// Clear any existing show timeout
-		if (showTimeoutRef.current) {
-			clearTimeout(showTimeoutRef.current)
-			showTimeoutRef.current = null
+		if (cameraState === 'moving' && isOpen && currentTooltip) {
+			tooltipManager.hideTooltip(editor, currentTooltip.id, true)
+		}
+	}, [cameraState, isOpen, currentTooltip, editor])
+
+	useEffect(() => {
+		function handleKeyDown(event: KeyboardEvent) {
+			if (event.key === 'Escape' && currentTooltip && isOpen) {
+				tooltipManager.hideTooltip(editor, currentTooltip.id)
+				event.stopPropagation()
+			}
 		}
 
+		document.addEventListener('keydown', handleKeyDown, { capture: true })
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown, { capture: true })
+		}
+	}, [editor, currentTooltip, isOpen])
+
+	// 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 = currentTooltip.targetElement.getBoundingClientRect()
@@ -164,11 +202,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
-				}, editor.options.tooltipDelayMs)
+				}, currentTooltip.delayDuration)
 			} else {
 				// Subsequent tooltips show immediately
 				setIsOpen(true)
@@ -179,7 +218,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
@@ -207,10 +252,22 @@ function TooltipSingleton() {
 
 /** @public @react */
 export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(
-	({ children, content, side, sideOffset = 5, disabled = false }, ref) => {
+	(
+		{
+			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
@@ -224,18 +281,35 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 			}
 		}, [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}</>
 		}
 
+		let delayDurationToUse
+		if (showUiLabels) {
+			delayDurationToUse = 0
+		} else {
+			delayDurationToUse =
+				delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+		}
+
 		// Fallback to old behavior if no provider
-		if (!hasProvider) {
+		if (!hasProvider || showUiLabels) {
 			return (
-				<_Tooltip.Root
-					delayDuration={editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS}
-					disableHoverableContent
-				>
+				<_Tooltip.Root delayDuration={delayDurationToUse} disableHoverableContent={!showUiLabels}>
 					<_Tooltip.Trigger asChild ref={ref}>
 						{children}
 					</_Tooltip.Trigger>
@@ -264,7 +338,9 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				content,
 				event.currentTarget as HTMLElement,
 				sideToUse,
-				sideOffset
+				sideOffset,
+				showOnMobile,
+				delayDurationToUse
 			)
 		}
 
@@ -280,7 +356,9 @@ export const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProp
 				content,
 				event.currentTarget as HTMLElement,
 				sideToUse,
-				sideOffset
+				sideOffset,
+				showOnMobile,
+				delayDurationToUse
 			)
 		}
 

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/TldrawUiMenuItem.tsx

@@ -213,7 +213,7 @@ export function TldrawUiMenuItem<
 						icon={icon}
 						onSelect={onSelect}
 						onDragStart={onDragStart}
-						labelToUse={labelToUse}
+						labelStr={labelStr}
 						titleStr={titleStr}
 						disabled={disabled}
 						isSelected={isSelected}
@@ -247,7 +247,7 @@ export function TldrawUiMenuItem<
 						icon={icon}
 						onSelect={onSelect}
 						onDragStart={onDragStart}
-						labelToUse={labelToUse}
+						labelStr={labelStr}
 						titleStr={titleStr}
 						disabled={disabled}
 						isSelected={isSelected}
@@ -316,8 +316,8 @@ function useDraggableEvents(
 				if (
 					distanceSq >
 					(editor.getInstanceState().isCoarsePointer
-						? editor.options.coarseDragDistanceSquared
-						: editor.options.dragDistanceSquared)
+						? editor.options.uiCoarseDragDistanceSquared
+						: editor.options.uiDragDistanceSquared)
 				) {
 					const screenSpaceStart = state.screenSpaceStart
 					state = {
@@ -333,7 +333,7 @@ function useDraggableEvents(
 							type: 'pointer',
 							target: 'canvas',
 							name: 'pointer_down',
-							...getPointerInfo(e),
+							...getPointerInfo(editor, e),
 							point: screenSpaceStart,
 						})
 
@@ -345,11 +345,12 @@ function useDraggableEvents(
 							type: 'pointer',
 							target: 'canvas',
 							name: 'pointer_move',
-							...getPointerInfo(e),
+							...getPointerInfo(editor, e),
 							point: screenSpaceStart,
 						})
 
 						tooltipManager.hideAllTooltips()
+						editor.getContainer().focus()
 					})
 				}
 			}
@@ -364,7 +365,7 @@ function useDraggableEvents(
 				type: 'pointer',
 				target: 'canvas',
 				name: 'pointer_up',
-				...getPointerInfo(e),
+				...getPointerInfo(editor, e),
 			})
 		}
 
@@ -391,7 +392,7 @@ function useDraggableEvents(
 
 function DraggableToolbarButton({
 	id,
-	labelToUse,
+	labelStr,
 	titleStr,
 	disabled,
 	isSelected,
@@ -402,7 +403,7 @@ function DraggableToolbarButton({
 }: {
 	id: string
 	disabled: boolean
-	labelToUse?: string
+	labelStr?: string
 	titleStr?: string
 	isSelected?: boolean
 	icon: TLUiMenuItemProps['icon']
@@ -415,7 +416,7 @@ function DraggableToolbarButton({
 	if (overflow) {
 		return (
 			<TldrawUiToolbarButton
-				aria-label={labelToUse}
+				aria-label={labelStr}
 				aria-pressed={isSelected ? 'true' : 'false'}
 				isActive={isSelected}
 				className="tlui-button-grid__button"
@@ -433,7 +434,7 @@ function DraggableToolbarButton({
 
 	return (
 		<TldrawUiToolbarButton
-			aria-label={labelToUse}
+			aria-label={labelStr}
 			aria-pressed={isSelected ? 'true' : 'false'}
 			data-testid={`tools.${id}`}
 			data-value={id}