tldraw 3.16.0-canary.fa3749606e52 → 3.16.0-next.282b7be564ae

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

@@ -1,6 +1,8 @@
 import classnames from 'classnames'
 import { Toolbar as _Toolbar } from 'radix-ui'
 import React from 'react'
+import { TldrawUiColumn, TldrawUiGrid, TldrawUiRow } from './layout'
+import { TldrawUiTooltip } from './TldrawUiTooltip'
 
 /** @public */
 export interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -8,20 +10,42 @@ export interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
 	className?: string
 	dir?: 'ltr' | 'rtl'
 	label: string
+	orientation?: 'horizontal' | 'vertical' | 'grid'
+	tooltipSide?: 'top' | 'right' | 'bottom' | 'left'
+}
+
+const LayoutByOrientation = {
+	horizontal: TldrawUiRow,
+	vertical: TldrawUiColumn,
+	grid: TldrawUiGrid,
 }
 
 /** @public @react */
 export const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(
-	({ children, className, label, ...props }: TLUiToolbarProps, ref) => {
+	(
+		{
+			children,
+			className,
+			label,
+			orientation = 'horizontal',
+			tooltipSide,
+			...props
+		}: TLUiToolbarProps,
+		ref
+	) => {
+		const Layout = LayoutByOrientation[orientation]
 		return (
-			<_Toolbar.Root
-				ref={ref}
-				{...props}
-				className={classnames('tlui-toolbar-container', className)}
-				aria-label={label}
-			>
-				{children}
-			</_Toolbar.Root>
+			<Layout asChild tooltipSide={tooltipSide}>
+				<_Toolbar.Root
+					ref={ref}
+					{...props}
+					className={classnames('tlui-toolbar', className)}
+					aria-label={label}
+					orientation={orientation === 'grid' ? 'horizontal' : orientation}
+				>
+					{children}
+				</_Toolbar.Root>
+			</Layout>
 		)
 	}
 )
@@ -34,23 +58,30 @@ export interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonE
 	disabled?: boolean
 	isActive?: boolean
 	type: 'icon' | 'tool' | 'menu'
+	tooltip?: string
 }
 
 /** @public @react */
 export const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(
-	({ asChild, children, type, isActive, ...props }: TLUiToolbarButtonProps, ref) => {
-		return (
+	({ asChild, children, type, isActive, tooltip, ...props }: TLUiToolbarButtonProps, ref) => {
+		const button = (
 			<_Toolbar.Button
 				ref={ref}
 				asChild={asChild}
 				draggable={false}
 				data-isactive={isActive}
 				{...props}
+				// The tooltip takes care of this.
+				title={undefined}
 				className={classnames('tlui-button', `tlui-button__${type}`, props.className)}
 			>
 				{children}
 			</_Toolbar.Button>
 		)
+
+		const tooltipContent = tooltip || props.title
+
+		return <TldrawUiTooltip content={tooltipContent}>{button}</TldrawUiTooltip>
 	}
 )
 
@@ -93,6 +124,7 @@ export interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLBut
 	className?: string
 	type: 'icon' | 'tool'
 	value: string
+	tooltip?: string
 }
 
 /** @public @react */
@@ -101,11 +133,14 @@ export const TldrawUiToolbarToggleItem = ({
 	className,
 	type,
 	value,
+	tooltip,
 	...props
 }: TLUiToolbarToggleItemProps) => {
-	return (
+	const toggleItem = (
 		<_Toolbar.ToggleItem
 			{...props}
+			// The tooltip takes care of this.
+			title={undefined}
 			className={classnames(
 				'tlui-button',
 				`tlui-button__${type}`,
@@ -117,4 +152,8 @@ export const TldrawUiToolbarToggleItem = ({
 			{children}
 		</_Toolbar.ToggleItem>
 	)
+
+	const tooltipContent = tooltip || props.title
+
+	return <TldrawUiTooltip content={tooltipContent}>{toggleItem}</TldrawUiTooltip>
 }

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

@@ -0,0 +1,327 @@
+import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'
+import { Tooltip as _Tooltip } from 'radix-ui'
+import React, {
+	createContext,
+	forwardRef,
+	ReactNode,
+	useContext,
+	useEffect,
+	useRef,
+	useState,
+} from 'react'
+import { useTldrawUiOrientation } from './layout'
+
+const DEFAULT_TOOLTIP_DELAY_MS = 700
+
+/** @public */
+export interface TldrawUiTooltipProps {
+	children: React.ReactNode
+	content?: string | React.ReactNode
+	side?: 'top' | 'right' | 'bottom' | 'left'
+	sideOffset?: number
+	disabled?: boolean
+	showOnMobile?: boolean
+	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
+		showOnMobile: boolean
+		targetElement: HTMLElement
+		delayDuration: number | undefined
+	} | null>('current tooltip', null)
+	private destroyTimeoutId: number | null = null
+
+	static getInstance(): TooltipManager {
+		if (!TooltipManager.instance) {
+			TooltipManager.instance = new TooltipManager()
+		}
+		return TooltipManager.instance
+	}
+
+	showTooltip(
+		tooltipId: string,
+		content: string | React.ReactNode,
+		targetElement: HTMLElement,
+		side: 'top' | 'right' | 'bottom' | 'left',
+		sideOffset: number,
+		showOnMobile: boolean,
+		delayDuration: number | undefined
+	) {
+		// Clear any existing destroy timeout
+		if (this.destroyTimeoutId) {
+			clearTimeout(this.destroyTimeoutId)
+			this.destroyTimeoutId = null
+		}
+
+		// Update current tooltip
+		this.currentTooltip.set({
+			id: tooltipId,
+			content,
+			side,
+			sideOffset,
+			showOnMobile,
+			targetElement,
+			delayDuration,
+		})
+	}
+
+	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() {
+		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()
+	}
+}
+
+export const tooltipManager = TooltipManager.getInstance()
+
+// Context for the tooltip singleton
+const TooltipSingletonContext = createContext<boolean>(false)
+
+/** @public */
+export interface TldrawUiTooltipProviderProps {
+	children: React.ReactNode
+}
+
+/** @public @react */
+export function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {
+	return (
+		<_Tooltip.Provider skipDelayDuration={700}>
+			<TooltipSingletonContext.Provider value={true}>
+				{children}
+				<TooltipSingleton />
+			</TooltipSingletonContext.Provider>
+		</_Tooltip.Provider>
+	)
+}
+
+// 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',
+		() => tooltipManager.getCurrentTooltipData(),
+		[]
+	)
+
+	// Update open state and trigger position
+	useEffect(() => {
+		// Clear any existing show timeout
+		if (showTimeoutRef.current) {
+			clearTimeout(showTimeoutRef.current)
+			showTimeoutRef.current = null
+		}
+
+		if (currentTooltip && triggerRef.current) {
+			// Position the invisible trigger element over the active element
+			const activeRect = currentTooltip.targetElement.getBoundingClientRect()
+			const trigger = triggerRef.current
+
+			trigger.style.position = 'fixed'
+			trigger.style.left = `${activeRect.left}px`
+			trigger.style.top = `${activeRect.top}px`
+			trigger.style.width = `${activeRect.width}px`
+			trigger.style.height = `${activeRect.height}px`
+			trigger.style.pointerEvents = 'none'
+			trigger.style.zIndex = '9999'
+
+			// Handle delay for first show
+			if (isFirstShowRef.current && editor) {
+				showTimeoutRef.current = editor.timers.setTimeout(() => {
+					setIsOpen(true)
+					isFirstShowRef.current = false
+				}, currentTooltip.delayDuration ?? editor.options.tooltipDelayMs)
+			} else {
+				// Subsequent tooltips show immediately
+				setIsOpen(true)
+			}
+		} else {
+			// Hide tooltip immediately
+			setIsOpen(false)
+			// Reset first show state after tooltip is hidden
+			isFirstShowRef.current = true
+		}
+	}, [editor, currentTooltip])
+
+	if (!currentTooltip) {
+		return null
+	}
+
+	return (
+		<_Tooltip.Root open={isOpen} delayDuration={0}>
+			<_Tooltip.Trigger asChild>
+				<div ref={triggerRef} />
+			</_Tooltip.Trigger>
+			<_Tooltip.Content
+				className="tlui-tooltip"
+				side={currentTooltip.side}
+				sideOffset={currentTooltip.sideOffset}
+				avoidCollisions
+				collisionPadding={8}
+				dir="ltr"
+			>
+				{currentTooltip.content}
+				<_Tooltip.Arrow className="tlui-tooltip__arrow" />
+			</_Tooltip.Content>
+		</_Tooltip.Root>
+	)
+}
+
+/** @public @react */
+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 orientationCtx = useTldrawUiOrientation()
+		const sideToUse = side ?? orientationCtx.tooltipSide
+
+		useEffect(() => {
+			const currentTooltipId = tooltipId.current
+			return () => {
+				if (hasProvider) {
+					tooltipManager.hideTooltip(editor, currentTooltipId, true)
+				}
+			}
+		}, [editor, hasProvider])
+
+		// 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={
+						delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)
+					}
+					disableHoverableContent
+				>
+					<_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 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,
+				delayDuration
+			)
+		}
+
+		const handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {
+			child.props.onMouseLeave?.(event)
+			tooltipManager.hideTooltip(editor, tooltipId.current)
+		}
+
+		const handleFocus = (event: React.FocusEvent<HTMLElement>) => {
+			child.props.onFocus?.(event)
+			tooltipManager.showTooltip(
+				tooltipId.current,
+				content,
+				event.currentTarget as HTMLElement,
+				sideToUse,
+				sideOffset,
+				showOnMobile,
+				delayDuration
+			)
+		}
+
+		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,
+		})
+
+		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/TldrawUiMenuContext.tsx

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

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

@@ -3,6 +3,7 @@ import { ReactNode } from 'react'
 import { unwrapLabel } from '../../../context/actions'
 import { TLUiTranslationKey } from '../../../hooks/useTranslation/TLUiTranslationKey'
 import { useTranslation } from '../../../hooks/useTranslation/useTranslation'
+import { TldrawUiColumn, TldrawUiGrid, TldrawUiRow, useTldrawUiOrientation } from '../layout'
 import { TldrawUiDropdownMenuGroup } from '../TldrawUiDropdownMenu'
 import { useTldrawUiMenuContext } from './TldrawUiMenuContext'
 
@@ -19,25 +20,19 @@ export interface TLUiMenuGroupProps<TranslationKey extends string = string> {
 
 /** @public @react */
 export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGroupProps) {
-	const { type: menuType, sourceId } = useTldrawUiMenuContext()
+	const menu = useTldrawUiMenuContext()
+	const { orientation } = useTldrawUiOrientation()
 	const msg = useTranslation()
-	const labelToUse = unwrapLabel(label, menuType)
+	const labelToUse = unwrapLabel(label, menu.type)
 	const labelStr = labelToUse ? msg(labelToUse as TLUiTranslationKey) : undefined
 
-	switch (menuType) {
-		case 'panel': {
-			return (
-				<div
-					className={classNames('tlui-menu__group', className)}
-					data-testid={`${sourceId}-group.${id}`}
-				>
-					{children}
-				</div>
-			)
-		}
+	switch (menu.type) {
 		case 'menu': {
 			return (
-				<TldrawUiDropdownMenuGroup className={className} data-testid={`${sourceId}-group.${id}`}>
+				<TldrawUiDropdownMenuGroup
+					className={className}
+					data-testid={`${menu.sourceId}-group.${id}`}
+				>
 					{children}
 				</TldrawUiDropdownMenuGroup>
 			)
@@ -47,7 +42,7 @@ export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGr
 				<div
 					dir="ltr"
 					className={classNames('tlui-menu__group', className)}
-					data-testid={`${sourceId}-group.${id}`}
+					data-testid={`${menu.sourceId}-group.${id}`}
 				>
 					{children}
 				</div>
@@ -56,12 +51,30 @@ export function TldrawUiMenuGroup({ id, label, className, children }: TLUiMenuGr
 		case 'keyboard-shortcuts': {
 			// todo: if groups need a label, let's give em a label
 			return (
-				<div className="tlui-shortcuts-dialog__group" data-testid={`${sourceId}-group.${id}`}>
+				<div className="tlui-shortcuts-dialog__group" data-testid={`${menu.sourceId}-group.${id}`}>
 					<h2 className="tlui-shortcuts-dialog__group__title">{labelStr}</h2>
 					<div className="tlui-shortcuts-dialog__group__content">{children}</div>
 				</div>
 			)
 		}
+		case 'toolbar': {
+			const Layout = orientation === 'horizontal' ? TldrawUiRow : TldrawUiColumn
+			return (
+				<Layout className="tlui-main-toolbar__group" data-testid={`${menu.sourceId}-group.${id}`}>
+					{children}
+				</Layout>
+			)
+		}
+		case 'toolbar-overflow': {
+			return (
+				<TldrawUiGrid
+					className="tlui-main-toolbar__group"
+					data-testid={`${menu.sourceId}-group.${id}`}
+				>
+					{children}
+				</TldrawUiGrid>
+			)
+		}
 		default: {
 			return children
 		}