snapshot of https://github.com/tldraw/tldraw.git (main, 2026-09-23; blobs > 131072B omitted)

packages/commenting/src/ui/reaction-picker.tsx

@@ -0,0 +1,113 @@
+import { useCallback, useId, type ComponentType, type KeyboardEvent, type MouseEvent } from 'react'
+import {
+	TldrawUiButton,
+	TldrawUiDropdownMenuContent,
+	TldrawUiDropdownMenuRoot,
+	TldrawUiDropdownMenuTrigger,
+	tlmenus,
+	useMaybeEditor,
+	useTranslation,
+} from 'tldraw'
+import { EmojiPicker, type EmojiPickerProps } from './emoji-picker'
+import { SmileyIcon } from './icons'
+import { RenderReaction } from './reaction'
+
+/** @public */
+export interface ReactionPickerProps {
+	/** The emoji to offer. Defaults to `DEFAULT_REACTION_EMOJI`. */
+	emoji?: string[]
+	/** Emoji the current user has already reacted with; shown as pressed in the grid. */
+	selected?: string[]
+	/** Called when an emoji is chosen. */
+	onSelect?(emoji: string): void
+	/** How to draw each emoji token. Defaults to the token string (OS emoji font). */
+	renderReaction?: RenderReaction
+	/**
+	 * What the button opens — the thing that produces a token. Defaults to `EmojiPicker`, the grid of
+	 * emoji. Swap it for any component taking the same props to offer something else entirely (the
+	 * drawn reactions example replaces it with a canvas you draw in); the props are passed straight
+	 * through either way.
+	 */
+	palette?: ComponentType<EmojiPickerProps>
+	/**
+	 * Identifies the menu in tldraw's global menu registry, which keys open/closed state by id.
+	 * A thread renders one picker per comment, so this must differ per comment — sharing an id
+	 * makes every picker in the thread open at once. Defaults to a per-instance generated id;
+	 * pass one only for a stabler, more debuggable value.
+	 */
+	menuId?: string
+	/** Class for the trigger button. Defaults to the card-action style, matching the ⋯ button. */
+	className?: string
+}
+
+/**
+ * Whether a palette pick asked to keep the palette open (shift held) for multi-select.
+ * @internal
+ */
+export function isMultiSelectPick(event?: MouseEvent | KeyboardEvent): boolean {
+	return !!event?.shiftKey
+}
+
+/**
+ * The add-reaction affordance: a smiley button that opens an emoji grid.
+ *
+ * Anchored to its own button rather than to the reactions row, so the menu keeps its position as
+ * reactions are added and the row reflows.
+ *
+ * Picking an emoji dismisses the grid — adding and removing alike, since either way the picker has
+ * done its job — and hands focus back to the trigger. Shift-picking keeps the grid open, for
+ * choosing several reactions in a row.
+ * @public @react
+ */
+export function ReactionPicker({
+	emoji,
+	selected,
+	onSelect,
+	renderReaction,
+	palette: Palette = EmojiPicker,
+	menuId,
+	className = 'tlui-cmt-thread__action',
+}: ReactionPickerProps) {
+	const msg = useTranslation()
+	const editor = useMaybeEditor()
+	// Unique per mounted picker unless the host supplies something stabler — see `menuId`.
+	const generatedId = useId()
+	const id = menuId ?? `comment-reactions-${generatedId}`
+
+	// The dropdown's open state lives in tldraw's global menu registry, so dropping the entry is
+	// what closes it. The palette's tokens are plain buttons — a swappable component, not radix
+	// menu items — so nothing dismisses the menu on its own.
+	const handleSelect = useCallback(
+		(value: string, event?: MouseEvent | KeyboardEvent) => {
+			onSelect?.(value)
+			if (!isMultiSelectPick(event)) {
+				tlmenus.deleteOpenMenu(id, editor?.contextId)
+			}
+		},
+		[onSelect, id, editor]
+	)
+
+	return (
+		<TldrawUiDropdownMenuRoot id={id}>
+			<TldrawUiDropdownMenuTrigger>
+				<TldrawUiButton
+					type="icon"
+					tooltip={msg('comments.add-reaction')}
+					title={msg('comments.add-reaction')}
+					className={className}
+				>
+					<SmileyIcon />
+				</TldrawUiButton>
+			</TldrawUiDropdownMenuTrigger>
+			{/* left-aligned under the trigger, so the grid opens rightward off the card's edge */}
+			<TldrawUiDropdownMenuContent side="bottom" align="start" alignOffset={0} sideOffset={4}>
+				<Palette
+					emoji={emoji}
+					selected={selected}
+					onSelect={handleSelect}
+					renderReaction={renderReaction}
+				/>
+			</TldrawUiDropdownMenuContent>
+		</TldrawUiDropdownMenuRoot>
+	)
+}