tldraw 3.16.0-canary.6f3aedaa1c01 → 3.16.0-canary.7cd3b8a5bfd6

package/dist-esm/lib/ui/components/Toolbar/OverflowingToolbar.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/Toolbar/OverflowingToolbar.tsx"],
-  "sourcesContent": ["import {\n\tactiveElementShouldCaptureKeys,\n\tpreventDefault,\n\ttlmenus,\n\tuseEditor,\n\tuseEvent,\n\tuseUniqueSafeId,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { createContext, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { areShortcutsDisabled } from '../../hooks/useKeyboardShortcuts'\nimport { TLUiToolItem } from '../../hooks/useTools'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiRow } from '../primitives/layout'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\n\nexport const IsInOverflowContext = createContext(false)\n\nconst NUMBERED_SHORTCUT_KEYS: Record<string, number> = {\n\t'1': 0,\n\t'2': 1,\n\t'3': 2,\n\t'4': 3,\n\t'5': 4,\n\t'6': 5,\n\t'7': 6,\n\t'8': 7,\n\t'9': 8,\n\t'0': 9,\n}\n\n/** @public */\nexport interface OverflowingToolbarProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function OverflowingToolbar({ children }: OverflowingToolbarProps) {\n\tconst editor = useEditor()\n\tconst id = useUniqueSafeId()\n\tconst breakpoint = useBreakpoint()\n\tconst msg = useTranslation()\n\tconst rButtons = useRef<HTMLElement[]>([])\n\tconst [isOpen, setIsOpen] = useState(false)\n\n\tconst overflowIndex = Math.min(8, 5 + breakpoint)\n\n\tconst [totalItems, setTotalItems] = useState(0)\n\tconst mainToolsRef = useRef<HTMLDivElement>(null)\n\tconst [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)\n\n\tconst css = useMemo(() => {\n\t\tconst activeCss = lastActiveOverflowItem ? `:not([data-value=\"${lastActiveOverflowItem}\"])` : ''\n\n\t\treturn `\n\t\t\t#${id}_main > *:nth-of-type(n + ${overflowIndex + (lastActiveOverflowItem ? 1 : 2)}):not([data-radix-popper-content-wrapper])${activeCss} {\n\t\t\t\tdisplay: none;\n\t\t\t}\n\t\t\t#${id}_more > *:nth-of-type(-n + ${overflowIndex}):not([data-radix-popper-content-wrapper]) {\n\t\t\t\tdisplay: none;\n\t\t\t}\n        `\n\t}, [lastActiveOverflowItem, id, overflowIndex])\n\n\tconst onDomUpdate = useEvent(() => {\n\t\tif (!mainToolsRef.current) return\n\n\t\tconst children = Array.from(mainToolsRef.current.children)\n\t\tsetTotalItems(children.length)\n\n\t\t// If the last active overflow item is no longer in the overflow, clear it\n\t\tconst lastActiveElementIdx = children.findIndex(\n\t\t\t(el) => el.getAttribute('data-value') === lastActiveOverflowItem\n\t\t)\n\t\tif (lastActiveElementIdx <= overflowIndex) {\n\t\t\tsetLastActiveOverflowItem(null)\n\t\t}\n\n\t\t// But if there's a new active item...\n\t\tconst activeElementIdx = Array.from(mainToolsRef.current.children).findIndex(\n\t\t\t(el) => el.getAttribute('aria-pressed') === 'true'\n\t\t)\n\t\tif (activeElementIdx === -1) return\n\n\t\t// ...and it's in the overflow, set it as the last active overflow item\n\t\tif (activeElementIdx >= overflowIndex) {\n\t\t\tsetLastActiveOverflowItem(children[activeElementIdx].getAttribute('data-value'))\n\t\t}\n\n\t\t// Save the buttons that are actually visible\n\t\trButtons.current = Array.from(mainToolsRef.current?.children ?? []).filter(\n\t\t\t(el): el is HTMLElement => {\n\t\t\t\t// only count html elements...\n\t\t\t\tif (!(el instanceof HTMLElement)) return false\n\n\t\t\t\t// ...that are buttons...\n\t\t\t\tif (el.tagName.toLowerCase() !== 'button') return false\n\n\t\t\t\t// ...that are actually visible\n\t\t\t\treturn !!(el.offsetWidth || el.offsetHeight)\n\t\t\t}\n\t\t)\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tonDomUpdate()\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tif (!mainToolsRef.current) return\n\n\t\tconst mutationObserver = new MutationObserver(onDomUpdate)\n\t\tmutationObserver.observe(mainToolsRef.current, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t\tattributeFilter: ['data-value', 'aria-pressed'],\n\t\t})\n\n\t\treturn () => {\n\t\t\tmutationObserver.disconnect()\n\t\t}\n\t}, [onDomUpdate])\n\n\tuseEffect(() => {\n\t\tif (!editor.options.enableToolbarKeyboardShortcuts) return\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (areShortcutsDisabled(editor) || activeElementShouldCaptureKeys(true /* allow buttons */))\n\t\t\t\treturn\n\t\t\t// no accelerator keys\n\t\t\tif (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return\n\t\t\tconst index = NUMBERED_SHORTCUT_KEYS[event.key]\n\t\t\tif (typeof index === 'number') {\n\t\t\t\tpreventDefault(event)\n\t\t\t\trButtons.current[index]?.click()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown)\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleKeyDown)\n\t\t}\n\t}, [editor])\n\n\tconst popoverId = 'toolbar overflow'\n\treturn (\n\t\t<>\n\t\t\t<style nonce={editor.options.nonce}>{css}</style>\n\t\t\t<TldrawUiToolbar\n\t\t\t\torientation=\"horizontal\"\n\t\t\t\tclassName={classNames('tlui-main-toolbar__tools', {\n\t\t\t\t\t'tlui-main-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,\n\t\t\t\t})}\n\t\t\t\tlabel={msg('tool-panel.title')}\n\t\t\t>\n\t\t\t\t<TldrawUiRow id={`${id}_main`} ref={mainToolsRef}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"toolbar\" sourceId=\"toolbar\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</TldrawUiRow>\n\t\t\t\t{/* There is a +1 because if the menu is just one item, it's not necessary. */}\n\t\t\t\t{totalItems > overflowIndex + 1 && (\n\t\t\t\t\t<IsInOverflowContext.Provider value={true}>\n\t\t\t\t\t\t<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\ttitle={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-main-toolbar__overflow\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more-button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon icon=\"chevron-up\" />\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t\t\t\t<TldrawUiPopoverContent side=\"top\" align=\"center\">\n\t\t\t\t\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\t\t\t\t\torientation=\"grid\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more-content\"\n\t\t\t\t\t\t\t\t\tlabel={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\tid={`${id}_more`}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"toolbar-overflow\" sourceId=\"toolbar\">\n\t\t\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t\t\t\t</TldrawUiPopover>\n\t\t\t\t\t</IsInOverflowContext.Provider>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\nexport const isActiveTLUiToolItem = (\n\titem: TLUiToolItem,\n\tactiveToolId: string | undefined,\n\tgeoState: string | null | undefined\n) => {\n\treturn item.meta?.geo\n\t\t? activeToolId === 'geo' && geoState === item.meta?.geo\n\t\t: activeToolId === item.id\n}\n"],
-  "mappings": "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",
-  "names": ["children"]
+  "sourcesContent": ["import {\n\tactiveElementShouldCaptureKeys,\n\tassert,\n\tmodulate,\n\tpreventDefault,\n\ttlmenus,\n\tuseEditor,\n\tuseEvent,\n\tuseUniqueSafeId,\n} from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { createContext, useEffect, useLayoutEffect, useRef, useState } from 'react'\nimport { PORTRAIT_BREAKPOINT } from '../../constants'\nimport { useBreakpoint } from '../../context/breakpoints'\nimport { areShortcutsDisabled } from '../../hooks/useKeyboardShortcuts'\nimport { TLUiToolItem } from '../../hooks/useTools'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiButtonIcon } from '../primitives/Button/TldrawUiButtonIcon'\nimport {\n\tTldrawUiPopover,\n\tTldrawUiPopoverContent,\n\tTldrawUiPopoverTrigger,\n} from '../primitives/TldrawUiPopover'\nimport { TldrawUiToolbar, TldrawUiToolbarButton } from '../primitives/TldrawUiToolbar'\nimport { TldrawUiColumn, TldrawUiRow } from '../primitives/layout'\nimport { TldrawUiMenuContextProvider } from '../primitives/menus/TldrawUiMenuContext'\n\nexport const IsInOverflowContext = createContext(false)\n\nconst NUMBERED_SHORTCUT_KEYS: Record<string, number> = {\n\t'1': 0,\n\t'2': 1,\n\t'3': 2,\n\t'4': 3,\n\t'5': 4,\n\t'6': 5,\n\t'7': 6,\n\t'8': 7,\n\t'9': 8,\n\t'0': 9,\n}\n\n/** @public */\nexport interface OverflowingToolbarProps {\n\tchildren: React.ReactNode\n\torientation: 'horizontal' | 'vertical'\n\tsizingParentClassName: string\n\tminItems: number\n\tminSizePx: number\n\tmaxItems: number\n\tmaxSizePx: number\n}\n\n/** @public @react */\nexport function OverflowingToolbar({\n\tchildren,\n\torientation,\n\tsizingParentClassName,\n\tminItems,\n\tminSizePx,\n\tmaxItems,\n\tmaxSizePx,\n}: OverflowingToolbarProps) {\n\tconst editor = useEditor()\n\tconst id = useUniqueSafeId()\n\tconst breakpoint = useBreakpoint()\n\tconst msg = useTranslation()\n\tconst rButtons = useRef<HTMLElement[]>([])\n\tconst [isOpen, setIsOpen] = useState(false)\n\n\tconst mainToolsRef = useRef<HTMLDivElement>(null)\n\n\t// we have to use state instead of a ref here so that we get\n\t// an update when the overflow popover mounts / unmounts\n\tconst [overflowTools, setOverflowTools] = useState<HTMLDivElement | null>(null)\n\tconst [lastActiveOverflowItem, setLastActiveOverflowItem] = useState<string | null>(null)\n\tconst [shouldShowOverflow, setShouldShowOverflow] = useState(false)\n\n\tconst onDomUpdate = useEvent(() => {\n\t\tif (!mainToolsRef.current) return\n\n\t\t// whenever we get an update, we need to re-calculate the number of items to show and update\n\t\t// the component accordingly.\n\t\tconst sizeProp = orientation === 'horizontal' ? 'offsetWidth' : 'offsetHeight'\n\n\t\t// toolbars can contain both single items and groups. we need to keep track of both.\n\t\ttype Items = (\n\t\t\t| { type: 'item'; element: HTMLElement }\n\t\t\t| { type: 'group'; items: Items; element: HTMLElement }\n\t\t)[]\n\n\t\t// walk through the dom and collect items so we can calculate what to show/hide\n\t\tconst mainItems = collectItems(mainToolsRef.current.children)\n\t\tconst overflowItems = overflowTools ? collectItems(overflowTools.children) : null\n\t\tfunction collectItems(collection: HTMLCollection) {\n\t\t\tconst items: Items = []\n\t\t\tfor (const child of collection) {\n\t\t\t\tif (child.classList.contains('tlui-main-toolbar__group')) {\n\t\t\t\t\titems.push({\n\t\t\t\t\t\ttype: 'group',\n\t\t\t\t\t\titems: collectItems(child.children),\n\t\t\t\t\t\telement: child as HTMLElement,\n\t\t\t\t\t})\n\t\t\t\t} else {\n\t\t\t\t\titems.push({ type: 'item', element: child as HTMLElement })\n\t\t\t\t}\n\t\t\t}\n\n\t\t\treturn items\n\t\t}\n\n\t\t// the number of items to show is based on the space available to the toolbar.\n\t\tconst sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)\n\t\tconst size = sizingParent[sizeProp]\n\t\tconst itemsToShow = Math.floor(\n\t\t\tmodulate(size, [minSizePx, maxSizePx], [minItems, maxItems], true)\n\t\t)\n\n\t\t// now we know how many items to show, we need to walk through the items we found and show /\n\t\t// hide them accordingly. We need to keep track of:\n\t\t// the number of item's we've shown in the main content so far\n\t\tlet mainItemCount = 0\n\t\t// the item that is currently active in the overflow content (if any)\n\t\tlet newActiveOverflowItem: string | null = null\n\t\t// whether the last active overflow item is actually still in the overflow content\n\t\tlet shouldInvalidateLastActiveOverflowItem = false\n\t\t// the buttons visible in the main content\n\t\tconst numberedButtons: HTMLButtonElement[] = []\n\t\tfunction visitItems(\n\t\t\tmainItems: Items,\n\t\t\toverflowItems: Items | null\n\t\t): {\n\t\t\t// for each group of items we visit, we need to know whether we showed anything in\n\t\t\t// either section\n\t\t\tdidShowAnyInMain: boolean\n\t\t\tdidShowAnyInOverflow: boolean\n\t\t} {\n\t\t\tif (overflowItems) assert(mainItems.length === overflowItems.length)\n\n\t\t\tlet didShowAnyInMain = false\n\t\t\tlet didShowAnyInOverflow = false\n\n\t\t\tfor (let i = 0; i < mainItems.length; i++) {\n\t\t\t\tconst mainItem = mainItems[i]\n\t\t\t\tconst overflowItem = overflowItems?.[i]\n\n\t\t\t\tif (mainItem.type === 'item') {\n\t\t\t\t\tconst isLastActiveOverflowItem =\n\t\t\t\t\t\tmainItem.element.getAttribute('data-value') === lastActiveOverflowItem\n\n\t\t\t\t\t// for single items, we show them in main if we have space, or if they're the\n\t\t\t\t\t// last-used item from the overflow.\n\t\t\t\t\tlet shouldShowInMain\n\t\t\t\t\tif (lastActiveOverflowItem) {\n\t\t\t\t\t\tshouldShowInMain = mainItemCount < itemsToShow || isLastActiveOverflowItem\n\t\t\t\t\t} else {\n\t\t\t\t\t\t// we use <= here because if there is no last active overflow item, we want\n\t\t\t\t\t\t// to show at least one item in the main toolbar.\n\t\t\t\t\t\tshouldShowInMain = mainItemCount <= itemsToShow\n\t\t\t\t\t}\n\t\t\t\t\tconst shouldShowInOverflow = mainItemCount >= itemsToShow\n\n\t\t\t\t\tdidShowAnyInMain ||= shouldShowInMain\n\t\t\t\t\tdidShowAnyInOverflow ||= shouldShowInOverflow\n\n\t\t\t\t\tsetAttribute(\n\t\t\t\t\t\tmainItem.element,\n\t\t\t\t\t\t'data-toolbar-visible',\n\t\t\t\t\t\tshouldShowInMain ? 'true' : 'false'\n\t\t\t\t\t)\n\t\t\t\t\tif (overflowItem) {\n\t\t\t\t\t\tassert(overflowItem.type === 'item')\n\t\t\t\t\t\tsetAttribute(\n\t\t\t\t\t\t\toverflowItem.element,\n\t\t\t\t\t\t\t'data-toolbar-visible',\n\t\t\t\t\t\t\tshouldShowInOverflow ? 'true' : 'false'\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t\tif (shouldShowInOverflow && mainItem.element.getAttribute('aria-pressed') === 'true') {\n\t\t\t\t\t\tnewActiveOverflowItem = mainItem.element.getAttribute('data-value')\n\t\t\t\t\t}\n\t\t\t\t\tif (shouldShowInMain && mainItem.element.tagName === 'BUTTON') {\n\t\t\t\t\t\tnumberedButtons.push(mainItem.element as HTMLButtonElement)\n\t\t\t\t\t}\n\t\t\t\t\tif (!shouldShowInOverflow && isLastActiveOverflowItem) {\n\t\t\t\t\t\tshouldInvalidateLastActiveOverflowItem = true\n\t\t\t\t\t}\n\t\t\t\t\tmainItemCount++\n\t\t\t\t} else {\n\t\t\t\t\t// for groups, we show them in main if we have space, or if they're the\n\t\t\t\t\t// last-used item from the overflow.\n\t\t\t\t\tlet result, overflowGroup\n\t\t\t\t\tif (overflowItem) {\n\t\t\t\t\t\tassert(overflowItem.type === 'group')\n\t\t\t\t\t\toverflowGroup = overflowItem\n\t\t\t\t\t\tresult = visitItems(mainItem.items, overflowGroup.items)\n\t\t\t\t\t} else {\n\t\t\t\t\t\tresult = visitItems(mainItem.items, null)\n\t\t\t\t\t}\n\n\t\t\t\t\tdidShowAnyInMain ||= result.didShowAnyInMain\n\t\t\t\t\tdidShowAnyInOverflow ||= result.didShowAnyInOverflow\n\n\t\t\t\t\tsetAttribute(\n\t\t\t\t\t\tmainItem.element,\n\t\t\t\t\t\t'data-toolbar-visible',\n\t\t\t\t\t\tresult.didShowAnyInMain ? 'true' : 'false'\n\t\t\t\t\t)\n\t\t\t\t\tif (overflowGroup) {\n\t\t\t\t\t\tsetAttribute(\n\t\t\t\t\t\t\toverflowGroup.element,\n\t\t\t\t\t\t\t'data-toolbar-visible',\n\t\t\t\t\t\t\tresult.didShowAnyInOverflow ? 'true' : 'false'\n\t\t\t\t\t\t)\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn { didShowAnyInMain, didShowAnyInOverflow }\n\t\t}\n\n\t\tconst { didShowAnyInOverflow } = visitItems(mainItems, overflowItems)\n\t\tsetShouldShowOverflow(didShowAnyInOverflow)\n\t\tif (newActiveOverflowItem) {\n\t\t\tsetLastActiveOverflowItem(newActiveOverflowItem)\n\t\t} else if (shouldInvalidateLastActiveOverflowItem) {\n\t\t\tsetLastActiveOverflowItem(null)\n\t\t}\n\n\t\trButtons.current = numberedButtons\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tonDomUpdate()\n\t})\n\n\tuseLayoutEffect(() => {\n\t\tif (!mainToolsRef.current) return\n\n\t\tconst mutationObserver = new MutationObserver(onDomUpdate)\n\t\tmutationObserver.observe(mainToolsRef.current, {\n\t\t\tchildList: true,\n\t\t\tsubtree: true,\n\t\t\tattributes: true,\n\t\t\tcharacterData: true,\n\t\t})\n\n\t\tconst sizingParent = findParentWithClassName(mainToolsRef.current, sizingParentClassName)\n\t\tconst resizeObserver = new ResizeObserver(onDomUpdate)\n\t\tresizeObserver.observe(sizingParent)\n\n\t\treturn () => {\n\t\t\tmutationObserver.disconnect()\n\t\t\tresizeObserver.disconnect()\n\t\t}\n\t}, [onDomUpdate, sizingParentClassName])\n\n\tuseEffect(() => {\n\t\tif (!editor.options.enableToolbarKeyboardShortcuts) return\n\n\t\tfunction handleKeyDown(event: KeyboardEvent) {\n\t\t\tif (\n\t\t\t\tareShortcutsDisabled(editor) ||\n\t\t\t\tactiveElementShouldCaptureKeys(true /* allow buttons */)\n\t\t\t) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\t// no accelerator keys\n\t\t\tif (event.ctrlKey || event.metaKey || event.altKey || event.shiftKey) return\n\t\t\tconst index = NUMBERED_SHORTCUT_KEYS[event.key]\n\t\t\tif (typeof index === 'number') {\n\t\t\t\tpreventDefault(event)\n\t\t\t\trButtons.current[index]?.click()\n\t\t\t}\n\t\t}\n\n\t\tdocument.addEventListener('keydown', handleKeyDown)\n\t\treturn () => {\n\t\t\tdocument.removeEventListener('keydown', handleKeyDown)\n\t\t}\n\t}, [editor])\n\n\tconst popoverId = 'toolbar overflow'\n\n\tconst Layout = orientation === 'horizontal' ? TldrawUiRow : TldrawUiColumn\n\treturn (\n\t\t<>\n\t\t\t<TldrawUiToolbar\n\t\t\t\torientation={orientation}\n\t\t\t\tclassName={classNames('tlui-main-toolbar__tools', {\n\t\t\t\t\t'tlui-main-toolbar__tools__mobile': breakpoint < PORTRAIT_BREAKPOINT.TABLET_SM,\n\t\t\t\t})}\n\t\t\t\tlabel={msg('tool-panel.title')}\n\t\t\t>\n\t\t\t\t<Layout id={`${id}_main`} ref={mainToolsRef}>\n\t\t\t\t\t<TldrawUiMenuContextProvider type=\"toolbar\" sourceId=\"toolbar\">\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t</Layout>\n\t\t\t\t{shouldShowOverflow && (\n\t\t\t\t\t<IsInOverflowContext.Provider value={true}>\n\t\t\t\t\t\t<TldrawUiPopover id={popoverId} open={isOpen} onOpenChange={setIsOpen}>\n\t\t\t\t\t\t\t<TldrawUiPopoverTrigger>\n\t\t\t\t\t\t\t\t<TldrawUiToolbarButton\n\t\t\t\t\t\t\t\t\ttitle={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\ttype=\"tool\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-main-toolbar__overflow\"\n\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more-button\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiButtonIcon\n\t\t\t\t\t\t\t\t\t\ticon={orientation === 'horizontal' ? 'chevron-up' : 'chevron-right'}\n\t\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t</TldrawUiToolbarButton>\n\t\t\t\t\t\t\t</TldrawUiPopoverTrigger>\n\t\t\t\t\t\t\t<TldrawUiPopoverContent\n\t\t\t\t\t\t\t\tside={orientation === 'horizontal' ? 'top' : 'right'}\n\t\t\t\t\t\t\t\talign={orientation === 'horizontal' ? 'center' : 'end'}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<TldrawUiToolbar\n\t\t\t\t\t\t\t\t\torientation=\"grid\"\n\t\t\t\t\t\t\t\t\tclassName=\"tlui-main-toolbar__overflow-content\"\n\t\t\t\t\t\t\t\t\tref={setOverflowTools}\n\t\t\t\t\t\t\t\t\tdata-testid=\"tools.more-content\"\n\t\t\t\t\t\t\t\t\tlabel={msg('tool-panel.more')}\n\t\t\t\t\t\t\t\t\tid={`${id}_more`}\n\t\t\t\t\t\t\t\t\tonClick={() => {\n\t\t\t\t\t\t\t\t\t\ttlmenus.deleteOpenMenu(popoverId, editor.contextId)\n\t\t\t\t\t\t\t\t\t\tsetIsOpen(false)\n\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<TldrawUiMenuContextProvider type=\"toolbar-overflow\" sourceId=\"toolbar\">\n\t\t\t\t\t\t\t\t\t\t{children}\n\t\t\t\t\t\t\t\t\t</TldrawUiMenuContextProvider>\n\t\t\t\t\t\t\t\t</TldrawUiToolbar>\n\t\t\t\t\t\t\t</TldrawUiPopoverContent>\n\t\t\t\t\t\t</TldrawUiPopover>\n\t\t\t\t\t</IsInOverflowContext.Provider>\n\t\t\t\t)}\n\t\t\t</TldrawUiToolbar>\n\t\t</>\n\t)\n}\n\nexport const isActiveTLUiToolItem = (\n\titem: TLUiToolItem,\n\tactiveToolId: string | undefined,\n\tgeoState: string | null | undefined\n) => {\n\treturn item.meta?.geo\n\t\t? activeToolId === 'geo' && geoState === item.meta?.geo\n\t\t: activeToolId === item.id\n}\n\nfunction findParentWithClassName(startingElement: HTMLElement, className: string): HTMLElement {\n\tlet element: HTMLElement | null = startingElement\n\twhile (element) {\n\t\tif (element.classList.contains(className)) {\n\t\t\treturn element\n\t\t}\n\t\telement = element.parentElement\n\t}\n\tthrow new Error('Could not find parent with class name ' + className)\n}\n\nfunction setAttribute(element: HTMLElement, name: string, value: string) {\n\tif (element.getAttribute(name) === value) return\n\telement.setAttribute(name, value)\n}\n"],
+  "mappings": "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",
+  "names": ["mainItems", "overflowItems", "didShowAnyInOverflow"]
 }

package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs

@@ -2,12 +2,24 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { Toolbar as _Toolbar } from "radix-ui";
 import React from "react";
-import { TldrawUiGrid, TldrawUiRow } from "./layout.mjs";
+import { TldrawUiColumn, TldrawUiGrid, TldrawUiRow } from "./layout.mjs";
 import { TldrawUiTooltip } from "./TldrawUiTooltip.mjs";
+const LayoutByOrientation = {
+  horizontal: TldrawUiRow,
+  vertical: TldrawUiColumn,
+  grid: TldrawUiGrid
+};
 const TldrawUiToolbar = React.forwardRef(
-  ({ children, className, label, orientation = "horizontal", ...props }, ref) => {
-    const Layout = orientation === "grid" ? TldrawUiGrid : TldrawUiRow;
-    return /* @__PURE__ */ jsx(Layout, { asChild: true, children: /* @__PURE__ */ jsx(
+  ({
+    children,
+    className,
+    label,
+    orientation = "horizontal",
+    tooltipSide,
+    ...props
+  }, ref) => {
+    const Layout = LayoutByOrientation[orientation];
+    return /* @__PURE__ */ jsx(Layout, { asChild: true, tooltipSide, children: /* @__PURE__ */ jsx(
       _Toolbar.Root,
       {
         ref,

package/dist-esm/lib/ui/components/primitives/TldrawUiToolbar.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiToolbar.tsx"],
-  "sourcesContent": ["import classnames from 'classnames'\nimport { Toolbar as _Toolbar } from 'radix-ui'\nimport React from 'react'\nimport { TldrawUiGrid, TldrawUiRow } from './layout'\nimport { TldrawUiTooltip } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tlabel: string\n\torientation?: 'horizontal' | 'grid'\n}\n\n/** @public @react */\nexport const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(\n\t({ children, className, label, orientation = 'horizontal', ...props }: TLUiToolbarProps, ref) => {\n\t\tconst Layout = orientation === 'grid' ? TldrawUiGrid : TldrawUiRow\n\t\treturn (\n\t\t\t<Layout asChild>\n\t\t\t\t<_Toolbar.Root\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t\tclassName={classnames('tlui-toolbar', className)}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\torientation={orientation === 'grid' ? 'horizontal' : orientation}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</_Toolbar.Root>\n\t\t\t</Layout>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdisabled?: boolean\n\tisActive?: boolean\n\ttype: 'icon' | 'tool' | 'menu'\n\ttooltip?: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(\n\t({ asChild, children, type, isActive, tooltip, ...props }: TLUiToolbarButtonProps, ref) => {\n\t\tconst button = (\n\t\t\t<_Toolbar.Button\n\t\t\t\tref={ref}\n\t\t\t\tasChild={asChild}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-isactive={isActive}\n\t\t\t\t{...props}\n\t\t\t\t// The tooltip takes care of this.\n\t\t\t\ttitle={undefined}\n\t\t\t\tclassName={classnames('tlui-button', `tlui-button__${type}`, props.className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Button>\n\t\t)\n\n\t\tconst tooltipContent = tooltip || props.title\n\n\t\treturn <TldrawUiTooltip content={tooltipContent}>{button}</TldrawUiTooltip>\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tvalue: any\n\t// TODO: fix up this type later\n\tdefaultValue?: any\n\ttype: 'single' | 'multiple'\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleGroup = ({\n\tchildren,\n\tclassName,\n\ttype,\n\t...props\n}: TLUiToolbarToggleGroupProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleGroup\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t\t// TODO: this fixes a bug in Radix until they fix it.\n\t\t\t// https://github.com/radix-ui/primitives/issues/3188\n\t\t\t// https://github.com/radix-ui/primitives/pull/3189\n\t\t\trole=\"radiogroup\"\n\t\t\tclassName={classnames('tlui-toolbar-toggle-group', className)}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleGroup>\n\t)\n}\n\n/** @public */\nexport interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\ttype: 'icon' | 'tool'\n\tvalue: string\n\ttooltip?: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleItem = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tvalue,\n\ttooltip,\n\t...props\n}: TLUiToolbarToggleItemProps) => {\n\tconst toggleItem = (\n\t\t<_Toolbar.ToggleItem\n\t\t\t{...props}\n\t\t\t// The tooltip takes care of this.\n\t\t\ttitle={undefined}\n\t\t\tclassName={classnames(\n\t\t\t\t'tlui-button',\n\t\t\t\t`tlui-button__${type}`,\n\t\t\t\t'tlui-toolbar-toggle-group-item',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tvalue={value}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleItem>\n\t)\n\n\tconst tooltipContent = tooltip || props.title\n\n\treturn <TldrawUiTooltip content={tooltipContent}>{toggleItem}</TldrawUiTooltip>\n}\n"],
-  "mappings": "AAqBI;AArBJ,OAAO,gBAAgB;AACvB,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAClB,SAAS,cAAc,mBAAmB;AAC1C,SAAS,uBAAuB;AAYzB,MAAM,kBAAkB,MAAM;AAAA,EACpC,CAAC,EAAE,UAAU,WAAW,OAAO,cAAc,cAAc,GAAG,MAAM,GAAqB,QAAQ;AAChG,UAAM,SAAS,gBAAgB,SAAS,eAAe;AACvD,WACC,oBAAC,UAAO,SAAO,MACd;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,WAAW,gBAAgB,SAAS;AAAA,QAC/C,cAAY;AAAA,QACZ,aAAa,gBAAgB,SAAS,eAAe;AAAA,QAEpD;AAAA;AAAA,IACF,GACD;AAAA,EAEF;AACD;AAcO,MAAM,wBAAwB,MAAM;AAAA,EAC1C,CAAC,EAAE,SAAS,UAAU,MAAM,UAAU,SAAS,GAAG,MAAM,GAA2B,QAAQ;AAC1F,UAAM,SACL;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,iBAAe;AAAA,QACd,GAAG;AAAA,QAEJ,OAAO;AAAA,QACP,WAAW,WAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,QAE3E;AAAA;AAAA,IACF;AAGD,UAAM,iBAAiB,WAAW,MAAM;AAExC,WAAO,oBAAC,mBAAgB,SAAS,gBAAiB,kBAAO;AAAA,EAC1D;AACD;AAcO,MAAM,6BAA6B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAmC;AAClC,SACC;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAIJ,MAAK;AAAA,MACL,WAAW,WAAW,6BAA6B,SAAS;AAAA,MAE3D;AAAA;AAAA,EACF;AAEF;AAYO,MAAM,4BAA4B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAkC;AACjC,QAAM,aACL;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,GAAG;AAAA,MAEJ,OAAO;AAAA,MACP,WAAW;AAAA,QACV;AAAA,QACA,gBAAgB,IAAI;AAAA,QACpB;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACF;AAGD,QAAM,iBAAiB,WAAW,MAAM;AAExC,SAAO,oBAAC,mBAAgB,SAAS,gBAAiB,sBAAW;AAC9D;",
+  "sourcesContent": ["import classnames from 'classnames'\nimport { Toolbar as _Toolbar } from 'radix-ui'\nimport React from 'react'\nimport { TldrawUiColumn, TldrawUiGrid, TldrawUiRow } from './layout'\nimport { TldrawUiTooltip } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiToolbarProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tlabel: string\n\torientation?: 'horizontal' | 'vertical' | 'grid'\n\ttooltipSide?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nconst LayoutByOrientation = {\n\thorizontal: TldrawUiRow,\n\tvertical: TldrawUiColumn,\n\tgrid: TldrawUiGrid,\n}\n\n/** @public @react */\nexport const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tlabel,\n\t\t\torientation = 'horizontal',\n\t\t\ttooltipSide,\n\t\t\t...props\n\t\t}: TLUiToolbarProps,\n\t\tref\n\t) => {\n\t\tconst Layout = LayoutByOrientation[orientation]\n\t\treturn (\n\t\t\t<Layout asChild tooltipSide={tooltipSide}>\n\t\t\t\t<_Toolbar.Root\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t\tclassName={classnames('tlui-toolbar', className)}\n\t\t\t\t\taria-label={label}\n\t\t\t\t\torientation={orientation === 'grid' ? 'horizontal' : orientation}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</_Toolbar.Root>\n\t\t\t</Layout>\n\t\t)\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarButtonProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tasChild?: boolean\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdisabled?: boolean\n\tisActive?: boolean\n\ttype: 'icon' | 'tool' | 'menu'\n\ttooltip?: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(\n\t({ asChild, children, type, isActive, tooltip, ...props }: TLUiToolbarButtonProps, ref) => {\n\t\tconst button = (\n\t\t\t<_Toolbar.Button\n\t\t\t\tref={ref}\n\t\t\t\tasChild={asChild}\n\t\t\t\tdraggable={false}\n\t\t\t\tdata-isactive={isActive}\n\t\t\t\t{...props}\n\t\t\t\t// The tooltip takes care of this.\n\t\t\t\ttitle={undefined}\n\t\t\t\tclassName={classnames('tlui-button', `tlui-button__${type}`, props.className)}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Button>\n\t\t)\n\n\t\tconst tooltipContent = tooltip || props.title\n\n\t\treturn <TldrawUiTooltip content={tooltipContent}>{button}</TldrawUiTooltip>\n\t}\n)\n\n/** @public */\nexport interface TLUiToolbarToggleGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\tdir?: 'ltr' | 'rtl'\n\tvalue: any\n\t// TODO: fix up this type later\n\tdefaultValue?: any\n\ttype: 'single' | 'multiple'\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleGroup = ({\n\tchildren,\n\tclassName,\n\ttype,\n\t...props\n}: TLUiToolbarToggleGroupProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleGroup\n\t\t\ttype={type}\n\t\t\t{...props}\n\t\t\t// TODO: this fixes a bug in Radix until they fix it.\n\t\t\t// https://github.com/radix-ui/primitives/issues/3188\n\t\t\t// https://github.com/radix-ui/primitives/pull/3189\n\t\t\trole=\"radiogroup\"\n\t\t\tclassName={classnames('tlui-toolbar-toggle-group', className)}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleGroup>\n\t)\n}\n\n/** @public */\nexport interface TLUiToolbarToggleItemProps extends React.HTMLAttributes<HTMLButtonElement> {\n\tchildren?: React.ReactNode\n\tclassName?: string\n\ttype: 'icon' | 'tool'\n\tvalue: string\n\ttooltip?: string\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleItem = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tvalue,\n\ttooltip,\n\t...props\n}: TLUiToolbarToggleItemProps) => {\n\tconst toggleItem = (\n\t\t<_Toolbar.ToggleItem\n\t\t\t{...props}\n\t\t\t// The tooltip takes care of this.\n\t\t\ttitle={undefined}\n\t\t\tclassName={classnames(\n\t\t\t\t'tlui-button',\n\t\t\t\t`tlui-button__${type}`,\n\t\t\t\t'tlui-toolbar-toggle-group-item',\n\t\t\t\tclassName\n\t\t\t)}\n\t\t\tvalue={value}\n\t\t>\n\t\t\t{children}\n\t\t</_Toolbar.ToggleItem>\n\t)\n\n\tconst tooltipContent = tooltip || props.title\n\n\treturn <TldrawUiTooltip content={tooltipContent}>{toggleItem}</TldrawUiTooltip>\n}\n"],
+  "mappings": "AAsCI;AAtCJ,OAAO,gBAAgB;AACvB,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAClB,SAAS,gBAAgB,cAAc,mBAAmB;AAC1D,SAAS,uBAAuB;AAYhC,MAAM,sBAAsB;AAAA,EAC3B,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,MAAM;AACP;AAGO,MAAM,kBAAkB,MAAM;AAAA,EACpC,CACC;AAAA,IACC;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA,GAAG;AAAA,EACJ,GACA,QACI;AACJ,UAAM,SAAS,oBAAoB,WAAW;AAC9C,WACC,oBAAC,UAAO,SAAO,MAAC,aACf;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,WAAW,gBAAgB,SAAS;AAAA,QAC/C,cAAY;AAAA,QACZ,aAAa,gBAAgB,SAAS,eAAe;AAAA,QAEpD;AAAA;AAAA,IACF,GACD;AAAA,EAEF;AACD;AAcO,MAAM,wBAAwB,MAAM;AAAA,EAC1C,CAAC,EAAE,SAAS,UAAU,MAAM,UAAU,SAAS,GAAG,MAAM,GAA2B,QAAQ;AAC1F,UAAM,SACL;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,iBAAe;AAAA,QACd,GAAG;AAAA,QAEJ,OAAO;AAAA,QACP,WAAW,WAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,QAE3E;AAAA;AAAA,IACF;AAGD,UAAM,iBAAiB,WAAW,MAAM;AAExC,WAAO,oBAAC,mBAAgB,SAAS,gBAAiB,kBAAO;AAAA,EAC1D;AACD;AAcO,MAAM,6BAA6B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAmC;AAClC,SACC;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAIJ,MAAK;AAAA,MACL,WAAW,WAAW,6BAA6B,SAAS;AAAA,MAE3D;AAAA;AAAA,EACF;AAEF;AAYO,MAAM,4BAA4B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAkC;AACjC,QAAM,aACL;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACC,GAAG;AAAA,MAEJ,OAAO;AAAA,MACP,WAAW;AAAA,QACV;AAAA,QACA,gBAAgB,IAAI;AAAA,QACpB;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACF;AAGD,QAAM,iBAAiB,WAAW,MAAM;AAExC,SAAO,oBAAC,mBAAgB,SAAS,gBAAiB,sBAAW;AAC9D;",
   "names": []
 }

package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs

@@ -1,78 +1,75 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { assert, uniqueId, useMaybeEditor, Vec } from "@tldraw/editor";
+import { assert, atom, 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.mjs";
+import React, {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useRef,
+  useState
+} from "react";
+import { useTldrawUiOrientation } from "./layout.mjs";
 const DEFAULT_TOOLTIP_DELAY_MS = 700;
 class TooltipManager {
   static instance = null;
-  currentTooltipId = null;
-  currentContent = "";
-  currentSide = "bottom";
-  currentSideOffset = 5;
+  currentTooltip = atom("current tooltip", null);
   destroyTimeoutId = null;
-  subscribers = /* @__PURE__ */ new Set();
-  activeElement = null;
-  editor = null;
   static getInstance() {
     if (!TooltipManager.instance) {
       TooltipManager.instance = new TooltipManager();
     }
     return TooltipManager.instance;
   }
-  setEditor(editor) {
-    this.editor = editor;
-  }
-  subscribe(callback) {
-    this.subscribers.add(callback);
-    return () => this.subscribers.delete(callback);
-  }
-  notify() {
-    this.subscribers.forEach((callback) => callback());
-  }
-  showTooltip(tooltipId, content, element, side = "bottom", sideOffset = 5) {
+  showTooltip(tooltipId, content, targetElement, side, sideOffset, showOnMobile, delayDuration) {
     if (this.destroyTimeoutId) {
       clearTimeout(this.destroyTimeoutId);
       this.destroyTimeoutId = null;
     }
-    this.currentTooltipId = tooltipId;
-    this.currentContent = content;
-    this.currentSide = side;
-    this.currentSideOffset = sideOffset;
-    this.activeElement = element;
-    this.notify();
+    this.currentTooltip.set({
+      id: tooltipId,
+      content,
+      side,
+      sideOffset,
+      showOnMobile,
+      targetElement,
+      delayDuration
+    });
   }
-  hideTooltip(tooltipId, instant = false) {
+  hideTooltip(editor, tooltipId, instant = false) {
     const hide = () => {
-      if (this.currentTooltipId === tooltipId) {
-        this.currentTooltipId = null;
-        this.currentContent = "";
-        this.activeElement = null;
+      if (this.currentTooltip.get()?.id === tooltipId) {
+        this.currentTooltip.set(null);
         this.destroyTimeoutId = null;
-        this.notify();
       }
     };
-    if (instant) {
+    if (editor && !instant) {
+      this.destroyTimeoutId = editor.timers.setTimeout(hide, 300);
+    } else {
       hide();
-    } else if (this.editor) {
-      this.destroyTimeoutId = this.editor.timers.setTimeout(hide, 300);
     }
   }
   hideAllTooltips() {
-    this.currentTooltipId = null;
-    this.currentContent = "";
-    this.activeElement = null;
+    this.currentTooltip.set(null);
     this.destroyTimeoutId = null;
-    this.notify();
   }
   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;
+  }
+  supportsHoverAtom = 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();
@@ -85,44 +82,23 @@ function TldrawUiTooltipProvider({ children }) {
 }
 function TooltipSingleton() {
   const editor = useMaybeEditor();
-  const [, forceUpdate] = useState({});
   const [isOpen, setIsOpen] = useState(false);
   const triggerRef = useRef(null);
-  const previousPositionRef = useRef(null);
-  const prefersReducedMotion = usePrefersReducedMotion();
-  const [shouldAnimate, setShouldAnimate] = useState(false);
   const isFirstShowRef = useRef(true);
   const showTimeoutRef = useRef(null);
+  const currentTooltip = useValue(
+    "current tooltip",
+    () => tooltipManager.getCurrentTooltipData(),
+    []
+  );
   useEffect(() => {
-    tooltipManager.setEditor(editor);
-  }, [editor]);
-  useEffect(() => {
-    const unsubscribe = tooltipManager.subscribe(() => {
-      forceUpdate({});
-    });
-    return unsubscribe;
-  }, []);
-  const tooltipData = tooltipManager.getCurrentTooltipData();
-  useEffect(() => {
-    const shouldBeOpen = Boolean(tooltipData.id && tooltipData.element);
     if (showTimeoutRef.current) {
       clearTimeout(showTimeoutRef.current);
       showTimeoutRef.current = null;
     }
-    if (shouldBeOpen && tooltipData.element && triggerRef.current) {
-      const activeRect = tooltipData.element.getBoundingClientRect();
+    if (currentTooltip && triggerRef.current) {
+      const activeRect = currentTooltip.targetElement.getBoundingClientRect();
       const trigger = triggerRef.current;
-      const newPosition = {
-        x: activeRect.left + activeRect.width / 2,
-        y: activeRect.top + activeRect.height / 2
-      };
-      let shouldAnimateCheck = false;
-      if (previousPositionRef.current) {
-        const isNearPrevious = Vec.DistMin(previousPositionRef.current, newPosition, 200);
-        shouldAnimateCheck = !prefersReducedMotion && isNearPrevious && Math.abs(newPosition.y - previousPositionRef.current.y) < 50;
-      }
-      setShouldAnimate(isFirstShowRef.current ? false : shouldAnimateCheck);
-      previousPositionRef.current = newPosition;
       trigger.style.position = "fixed";
       trigger.style.left = `${activeRect.left}px`;
       trigger.style.top = `${activeRect.top}px`;
@@ -134,18 +110,16 @@ function TooltipSingleton() {
         showTimeoutRef.current = editor.timers.setTimeout(() => {
           setIsOpen(true);
           isFirstShowRef.current = false;
-        }, editor.options.tooltipDelayMs);
+        }, currentTooltip.delayDuration ?? editor.options.tooltipDelayMs);
       } else {
         setIsOpen(true);
       }
-    } else if (!shouldBeOpen) {
+    } else {
       setIsOpen(false);
-      previousPositionRef.current = null;
-      setShouldAnimate(false);
       isFirstShowRef.current = true;
     }
-  }, [tooltipData.id, tooltipData.element, editor, prefersReducedMotion]);
-  if (!tooltipData.id) {
+  }, [editor, currentTooltip]);
+  if (!currentTooltip) {
     return null;
   }
   return /* @__PURE__ */ jsxs(_Tooltip.Root, { open: isOpen, delayDuration: 0, children: [
@@ -154,98 +128,115 @@ function TooltipSingleton() {
       _Tooltip.Content,
       {
         className: "tlui-tooltip",
-        "data-should-animate": shouldAnimate,
-        side: tooltipData.side,
-        sideOffset: tooltipData.sideOffset,
+        side: currentTooltip.side,
+        sideOffset: currentTooltip.sideOffset,
         avoidCollisions: true,
         collisionPadding: 8,
         dir: "ltr",
         children: [
-          tooltipData.content,
+          currentTooltip.content,
           /* @__PURE__ */ jsx(_Tooltip.Arrow, { className: "tlui-tooltip__arrow" })
         ]
       }
     )
   ] });
 }
-function TldrawUiTooltip({
-  children,
-  content,
-  side = "bottom",
-  sideOffset = 5,
-  disabled = false
-}) {
-  const editor = useMaybeEditor();
-  const tooltipId = useRef(uniqueId());
-  const hasProvider = useContext(TooltipSingletonContext);
-  if (disabled || !content) {
-    return /* @__PURE__ */ jsx(Fragment, { children });
-  }
-  if (!hasProvider) {
-    return /* @__PURE__ */ jsxs(
-      _Tooltip.Root,
-      {
-        delayDuration: editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS,
-        disableHoverableContent: true,
-        children: [
-          /* @__PURE__ */ jsx(_Tooltip.Trigger, { asChild: true, children }),
-          /* @__PURE__ */ jsxs(
-            _Tooltip.Content,
-            {
-              className: "tlui-tooltip",
-              side,
-              sideOffset,
-              avoidCollisions: true,
-              collisionPadding: 8,
-              dir: "ltr",
-              children: [
-                content,
-                /* @__PURE__ */ jsx(_Tooltip.Arrow, { className: "tlui-tooltip__arrow" })
-              ]
-            }
-          )
-        ]
-      }
-    );
+const TldrawUiTooltip = forwardRef(
+  ({
+    children,
+    content,
+    side,
+    sideOffset = 5,
+    disabled = false,
+    showOnMobile = false,
+    delayDuration
+  }, ref) => {
+    const editor = useMaybeEditor();
+    const tooltipId = useRef(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]);
+    if (disabled || !content) {
+      return /* @__PURE__ */ jsx(Fragment, { children });
+    }
+    if (!hasProvider) {
+      return /* @__PURE__ */ jsxs(
+        _Tooltip.Root,
+        {
+          delayDuration: delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS),
+          disableHoverableContent: true,
+          children: [
+            /* @__PURE__ */ jsx(_Tooltip.Trigger, { asChild: true, ref, children }),
+            /* @__PURE__ */ jsxs(
+              _Tooltip.Content,
+              {
+                className: "tlui-tooltip",
+                side: sideToUse,
+                sideOffset,
+                avoidCollisions: true,
+                collisionPadding: 8,
+                dir: "ltr",
+                children: [
+                  content,
+                  /* @__PURE__ */ jsx(_Tooltip.Arrow, { className: "tlui-tooltip__arrow" })
+                ]
+              }
+            )
+          ]
+        }
+      );
+    }
+    const child = React.Children.only(children);
+    assert(React.isValidElement(child), "TldrawUiTooltip children must be a single element");
+    const handleMouseEnter = (event) => {
+      child.props.onMouseEnter?.(event);
+      tooltipManager.showTooltip(
+        tooltipId.current,
+        content,
+        event.currentTarget,
+        sideToUse,
+        sideOffset,
+        showOnMobile,
+        delayDuration
+      );
+    };
+    const handleMouseLeave = (event) => {
+      child.props.onMouseLeave?.(event);
+      tooltipManager.hideTooltip(editor, tooltipId.current);
+    };
+    const handleFocus = (event) => {
+      child.props.onFocus?.(event);
+      tooltipManager.showTooltip(
+        tooltipId.current,
+        content,
+        event.currentTarget,
+        sideToUse,
+        sideOffset,
+        showOnMobile,
+        delayDuration
+      );
+    };
+    const handleBlur = (event) => {
+      child.props.onBlur?.(event);
+      tooltipManager.hideTooltip(editor, tooltipId.current);
+    };
+    const childrenWithHandlers = React.cloneElement(children, {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    });
+    return childrenWithHandlers;
   }
-  const child = React.Children.only(children);
-  assert(React.isValidElement(child), "TldrawUiTooltip children must be a single element");
-  const handleMouseEnter = (event) => {
-    child.props.onMouseEnter?.(event);
-    tooltipManager.showTooltip(
-      tooltipId.current,
-      content,
-      event.currentTarget,
-      side,
-      sideOffset
-    );
-  };
-  const handleMouseLeave = (event) => {
-    child.props.onMouseLeave?.(event);
-    tooltipManager.hideTooltip(tooltipId.current);
-  };
-  const handleFocus = (event) => {
-    child.props.onFocus?.(event);
-    tooltipManager.showTooltip(
-      tooltipId.current,
-      content,
-      event.currentTarget,
-      side,
-      sideOffset
-    );
-  };
-  const handleBlur = (event) => {
-    child.props.onBlur?.(event);
-    tooltipManager.hideTooltip(tooltipId.current);
-  };
-  const childrenWithHandlers = React.cloneElement(children, {
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onFocus: handleFocus,
-    onBlur: handleBlur
-  });
-  return childrenWithHandlers;
-}
+);
 export {
   TldrawUiTooltip,
   TldrawUiTooltipProvider,

package/dist-esm/lib/ui/components/primitives/TldrawUiTooltip.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiTooltip.tsx"],
-  "sourcesContent": ["import { assert, Editor, uniqueId, useMaybeEditor, Vec } from '@tldraw/editor'\nimport { Tooltip as _Tooltip } from 'radix-ui'\nimport React, { createContext, useContext, useEffect, useRef, useState } from 'react'\nimport { usePrefersReducedMotion } from '../../../shapes/shared/usePrefersReducedMotion'\n\nconst DEFAULT_TOOLTIP_DELAY_MS = 700\n\n/** @public */\nexport interface TldrawUiTooltipProps {\n\tchildren: React.ReactNode\n\tcontent?: string | React.ReactNode\n\tside?: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset?: number\n\tdisabled?: boolean\n}\n\n// Singleton tooltip manager\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate currentTooltipId: string | null = null\n\tprivate currentContent: string | React.ReactNode = ''\n\tprivate currentSide: 'top' | 'right' | 'bottom' | 'left' = 'bottom'\n\tprivate currentSideOffset: number = 5\n\tprivate destroyTimeoutId: number | null = null\n\tprivate subscribers: Set<() => void> = new Set()\n\tprivate activeElement: HTMLElement | null = null\n\tprivate editor: Editor | null = null\n\n\tstatic getInstance(): TooltipManager {\n\t\tif (!TooltipManager.instance) {\n\t\t\tTooltipManager.instance = new TooltipManager()\n\t\t}\n\t\treturn TooltipManager.instance\n\t}\n\n\tsetEditor(editor: Editor | null) {\n\t\tthis.editor = editor\n\t}\n\n\tsubscribe(callback: () => void): () => void {\n\t\tthis.subscribers.add(callback)\n\t\treturn () => this.subscribers.delete(callback)\n\t}\n\n\tprivate notify() {\n\t\tthis.subscribers.forEach((callback) => callback())\n\t}\n\n\tshowTooltip(\n\t\ttooltipId: string,\n\t\tcontent: string | React.ReactNode,\n\t\telement: HTMLElement,\n\t\tside: 'top' | 'right' | 'bottom' | 'left' = 'bottom',\n\t\tsideOffset: number = 5\n\t) {\n\t\t// Clear any existing destroy timeout\n\t\tif (this.destroyTimeoutId) {\n\t\t\tclearTimeout(this.destroyTimeoutId)\n\t\t\tthis.destroyTimeoutId = null\n\t\t}\n\n\t\t// Update current tooltip\n\t\tthis.currentTooltipId = tooltipId\n\t\tthis.currentContent = content\n\t\tthis.currentSide = side\n\t\tthis.currentSideOffset = sideOffset\n\t\tthis.activeElement = element\n\n\t\tthis.notify()\n\t}\n\n\thideTooltip(tooltipId: string, instant: boolean = false) {\n\t\tconst hide = () => {\n\t\t\t// Only hide if this is the current tooltip\n\t\t\tif (this.currentTooltipId === tooltipId) {\n\t\t\t\tthis.currentTooltipId = null\n\t\t\t\tthis.currentContent = ''\n\t\t\t\tthis.activeElement = null\n\t\t\t\tthis.destroyTimeoutId = null\n\t\t\t\tthis.notify()\n\t\t\t}\n\t\t}\n\n\t\tif (instant) {\n\t\t\thide()\n\t\t} else if (this.editor) {\n\t\t\t// Start destroy timeout (1 second)\n\t\t\tthis.destroyTimeoutId = this.editor.timers.setTimeout(hide, 300)\n\t\t}\n\t}\n\n\thideAllTooltips() {\n\t\tthis.currentTooltipId = null\n\t\tthis.currentContent = ''\n\t\tthis.activeElement = null\n\t\tthis.destroyTimeoutId = null\n\t\tthis.notify()\n\t}\n\n\tgetCurrentTooltipData() {\n\t\treturn {\n\t\t\tid: this.currentTooltipId,\n\t\t\tcontent: this.currentContent,\n\t\t\tside: this.currentSide,\n\t\t\tsideOffset: this.currentSideOffset,\n\t\t\telement: this.activeElement,\n\t\t}\n\t}\n}\n\nexport const tooltipManager = TooltipManager.getInstance()\n\n// Context for the tooltip singleton\nconst TooltipSingletonContext = createContext<boolean>(false)\n\n/** @public */\nexport interface TldrawUiTooltipProviderProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {\n\treturn (\n\t\t<_Tooltip.Provider skipDelayDuration={700}>\n\t\t\t<TooltipSingletonContext.Provider value={true}>\n\t\t\t\t{children}\n\t\t\t\t<TooltipSingleton />\n\t\t\t</TooltipSingletonContext.Provider>\n\t\t</_Tooltip.Provider>\n\t)\n}\n\n// The singleton tooltip component that renders once\nfunction TooltipSingleton() {\n\tconst editor = useMaybeEditor()\n\tconst [, forceUpdate] = useState({})\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst triggerRef = useRef<HTMLDivElement>(null)\n\tconst previousPositionRef = useRef<{ x: number; y: number } | null>(null)\n\tconst prefersReducedMotion = usePrefersReducedMotion()\n\tconst [shouldAnimate, setShouldAnimate] = useState(false)\n\tconst isFirstShowRef = useRef(true)\n\tconst showTimeoutRef = useRef<number | null>(null)\n\n\t// Set editor in tooltip manager\n\tuseEffect(() => {\n\t\ttooltipManager.setEditor(editor)\n\t}, [editor])\n\n\t// Subscribe to tooltip manager updates\n\tuseEffect(() => {\n\t\tconst unsubscribe = tooltipManager.subscribe(() => {\n\t\t\tforceUpdate({})\n\t\t})\n\t\treturn unsubscribe\n\t}, [])\n\n\tconst tooltipData = tooltipManager.getCurrentTooltipData()\n\n\t// Update open state and trigger position\n\tuseEffect(() => {\n\t\tconst shouldBeOpen = Boolean(tooltipData.id && tooltipData.element)\n\n\t\t// Clear any existing show timeout\n\t\tif (showTimeoutRef.current) {\n\t\t\tclearTimeout(showTimeoutRef.current)\n\t\t\tshowTimeoutRef.current = null\n\t\t}\n\n\t\tif (shouldBeOpen && tooltipData.element && triggerRef.current) {\n\t\t\t// Position the invisible trigger element over the active element\n\t\t\tconst activeRect = tooltipData.element.getBoundingClientRect()\n\t\t\tconst trigger = triggerRef.current\n\n\t\t\tconst newPosition = {\n\t\t\t\tx: activeRect.left + activeRect.width / 2,\n\t\t\t\ty: activeRect.top + activeRect.height / 2,\n\t\t\t}\n\n\t\t\t// Determine if we should animate\n\t\t\tlet shouldAnimateCheck = false\n\t\t\tif (previousPositionRef.current) {\n\t\t\t\tconst isNearPrevious = Vec.DistMin(previousPositionRef.current, newPosition, 200)\n\t\t\t\t// Only animate if the distance is less than 200px (nearby tooltips)\n\t\t\t\tshouldAnimateCheck =\n\t\t\t\t\t!prefersReducedMotion &&\n\t\t\t\t\tisNearPrevious &&\n\t\t\t\t\tMath.abs(newPosition.y - previousPositionRef.current.y) < 50\n\t\t\t}\n\t\t\t// Don't animate on initial show (previousPositionRef.current is null)\n\n\t\t\tsetShouldAnimate(isFirstShowRef.current ? false : shouldAnimateCheck)\n\t\t\tpreviousPositionRef.current = newPosition\n\n\t\t\ttrigger.style.position = 'fixed'\n\t\t\ttrigger.style.left = `${activeRect.left}px`\n\t\t\ttrigger.style.top = `${activeRect.top}px`\n\t\t\ttrigger.style.width = `${activeRect.width}px`\n\t\t\ttrigger.style.height = `${activeRect.height}px`\n\t\t\ttrigger.style.pointerEvents = 'none'\n\t\t\ttrigger.style.zIndex = '9999'\n\n\t\t\t// Handle delay for first show\n\t\t\tif (isFirstShowRef.current && editor) {\n\t\t\t\tshowTimeoutRef.current = editor.timers.setTimeout(() => {\n\t\t\t\t\tsetIsOpen(true)\n\t\t\t\t\tisFirstShowRef.current = false\n\t\t\t\t}, editor.options.tooltipDelayMs)\n\t\t\t} else {\n\t\t\t\t// Subsequent tooltips show immediately\n\t\t\t\tsetIsOpen(true)\n\t\t\t}\n\t\t} else if (!shouldBeOpen) {\n\t\t\t// Hide tooltip immediately\n\t\t\tsetIsOpen(false)\n\t\t\t// Reset position tracking when tooltip closes\n\t\t\tpreviousPositionRef.current = null\n\t\t\tsetShouldAnimate(false)\n\t\t\t// Reset first show state after tooltip is hidden\n\t\t\tisFirstShowRef.current = true\n\t\t}\n\t}, [tooltipData.id, tooltipData.element, editor, prefersReducedMotion])\n\n\tif (!tooltipData.id) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<_Tooltip.Root open={isOpen} delayDuration={0}>\n\t\t\t<_Tooltip.Trigger asChild>\n\t\t\t\t<div ref={triggerRef} />\n\t\t\t</_Tooltip.Trigger>\n\t\t\t<_Tooltip.Content\n\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\tdata-should-animate={shouldAnimate}\n\t\t\t\tside={tooltipData.side}\n\t\t\t\tsideOffset={tooltipData.sideOffset}\n\t\t\t\tavoidCollisions\n\t\t\t\tcollisionPadding={8}\n\t\t\t\tdir=\"ltr\"\n\t\t\t>\n\t\t\t\t{tooltipData.content}\n\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t</_Tooltip.Content>\n\t\t</_Tooltip.Root>\n\t)\n}\n\n/** @public @react */\nexport function TldrawUiTooltip({\n\tchildren,\n\tcontent,\n\tside = 'bottom',\n\tsideOffset = 5,\n\tdisabled = false,\n}: TldrawUiTooltipProps) {\n\tconst editor = useMaybeEditor()\n\tconst tooltipId = useRef<string>(uniqueId())\n\tconst hasProvider = useContext(TooltipSingletonContext)\n\n\t// Don't show tooltip if disabled, no content, or UI labels are disabled\n\tif (disabled || !content) {\n\t\treturn <>{children}</>\n\t}\n\n\t// Fallback to old behavior if no provider\n\tif (!hasProvider) {\n\t\treturn (\n\t\t\t<_Tooltip.Root\n\t\t\t\tdelayDuration={editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS}\n\t\t\t\tdisableHoverableContent\n\t\t\t>\n\t\t\t\t<_Tooltip.Trigger asChild>{children}</_Tooltip.Trigger>\n\t\t\t\t<_Tooltip.Content\n\t\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\t\tside={side}\n\t\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t\tavoidCollisions\n\t\t\t\t\tcollisionPadding={8}\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t>\n\t\t\t\t\t{content}\n\t\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t\t</_Tooltip.Content>\n\t\t\t</_Tooltip.Root>\n\t\t)\n\t}\n\n\tconst child = React.Children.only(children)\n\tassert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')\n\n\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\tchild.props.onMouseEnter?.(event)\n\t\ttooltipManager.showTooltip(\n\t\t\ttooltipId.current,\n\t\t\tcontent,\n\t\t\tevent.currentTarget as HTMLElement,\n\t\t\tside,\n\t\t\tsideOffset\n\t\t)\n\t}\n\n\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\tchild.props.onMouseLeave?.(event)\n\t\ttooltipManager.hideTooltip(tooltipId.current)\n\t}\n\n\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\tchild.props.onFocus?.(event)\n\t\ttooltipManager.showTooltip(\n\t\t\ttooltipId.current,\n\t\t\tcontent,\n\t\t\tevent.currentTarget as HTMLElement,\n\t\t\tside,\n\t\t\tsideOffset\n\t\t)\n\t}\n\n\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\tchild.props.onBlur?.(event)\n\t\ttooltipManager.hideTooltip(tooltipId.current)\n\t}\n\n\tconst childrenWithHandlers = React.cloneElement(children as React.ReactElement, {\n\t\tonMouseEnter: handleMouseEnter,\n\t\tonMouseLeave: handleMouseLeave,\n\t\tonFocus: handleFocus,\n\t\tonBlur: handleBlur,\n\t})\n\n\treturn childrenWithHandlers\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { assert, Atom, atom, Editor, uniqueId, useMaybeEditor, useValue } from '@tldraw/editor'\nimport { Tooltip as _Tooltip } from 'radix-ui'\nimport React, {\n\tcreateContext,\n\tforwardRef,\n\tReactNode,\n\tuseContext,\n\tuseEffect,\n\tuseRef,\n\tuseState,\n} from 'react'\nimport { useTldrawUiOrientation } from './layout'\n\nconst DEFAULT_TOOLTIP_DELAY_MS = 700\n\n/** @public */\nexport interface TldrawUiTooltipProps {\n\tchildren: React.ReactNode\n\tcontent?: string | React.ReactNode\n\tside?: 'top' | 'right' | 'bottom' | 'left'\n\tsideOffset?: number\n\tdisabled?: boolean\n\tshowOnMobile?: boolean\n\tdelayDuration?: number\n}\n\n// Singleton tooltip manager\nclass TooltipManager {\n\tprivate static instance: TooltipManager | null = null\n\tprivate currentTooltip = atom<{\n\t\tid: string\n\t\tcontent: ReactNode\n\t\tside: 'top' | 'right' | 'bottom' | 'left'\n\t\tsideOffset: number\n\t\tshowOnMobile: boolean\n\t\ttargetElement: HTMLElement\n\t\tdelayDuration: number | undefined\n\t} | null>('current tooltip', null)\n\tprivate destroyTimeoutId: number | null = null\n\n\tstatic getInstance(): TooltipManager {\n\t\tif (!TooltipManager.instance) {\n\t\t\tTooltipManager.instance = new TooltipManager()\n\t\t}\n\t\treturn TooltipManager.instance\n\t}\n\n\tshowTooltip(\n\t\ttooltipId: string,\n\t\tcontent: string | React.ReactNode,\n\t\ttargetElement: HTMLElement,\n\t\tside: 'top' | 'right' | 'bottom' | 'left',\n\t\tsideOffset: number,\n\t\tshowOnMobile: boolean,\n\t\tdelayDuration: number | undefined\n\t) {\n\t\t// Clear any existing destroy timeout\n\t\tif (this.destroyTimeoutId) {\n\t\t\tclearTimeout(this.destroyTimeoutId)\n\t\t\tthis.destroyTimeoutId = null\n\t\t}\n\n\t\t// Update current tooltip\n\t\tthis.currentTooltip.set({\n\t\t\tid: tooltipId,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset,\n\t\t\tshowOnMobile,\n\t\t\ttargetElement,\n\t\t\tdelayDuration,\n\t\t})\n\t}\n\n\thideTooltip(editor: Editor | null, tooltipId: string, instant: boolean = false) {\n\t\tconst hide = () => {\n\t\t\t// Only hide if this is the current tooltip\n\t\t\tif (this.currentTooltip.get()?.id === tooltipId) {\n\t\t\t\tthis.currentTooltip.set(null)\n\t\t\t\tthis.destroyTimeoutId = null\n\t\t\t}\n\t\t}\n\n\t\tif (editor && !instant) {\n\t\t\t// Start destroy timeout (1 second)\n\t\t\tthis.destroyTimeoutId = editor.timers.setTimeout(hide, 300)\n\t\t} else {\n\t\t\thide()\n\t\t}\n\t}\n\n\thideAllTooltips() {\n\t\tthis.currentTooltip.set(null)\n\t\tthis.destroyTimeoutId = null\n\t}\n\n\tgetCurrentTooltipData() {\n\t\tconst currentTooltip = this.currentTooltip.get()\n\t\tif (!currentTooltip) return null\n\t\tif (!this.supportsHover() && !currentTooltip.showOnMobile) return null\n\t\treturn currentTooltip\n\t}\n\n\tprivate supportsHoverAtom: Atom<boolean> | null = null\n\tsupportsHover() {\n\t\tif (!this.supportsHoverAtom) {\n\t\t\tconst mediaQuery = window.matchMedia('(hover: hover)')\n\t\t\tconst supportsHover = atom('has hover', mediaQuery.matches)\n\t\t\tthis.supportsHoverAtom = supportsHover\n\t\t\tmediaQuery.addEventListener('change', (e) => {\n\t\t\t\tsupportsHover.set(e.matches)\n\t\t\t})\n\t\t}\n\t\treturn this.supportsHoverAtom.get()\n\t}\n}\n\nexport const tooltipManager = TooltipManager.getInstance()\n\n// Context for the tooltip singleton\nconst TooltipSingletonContext = createContext<boolean>(false)\n\n/** @public */\nexport interface TldrawUiTooltipProviderProps {\n\tchildren: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiTooltipProvider({ children }: TldrawUiTooltipProviderProps) {\n\treturn (\n\t\t<_Tooltip.Provider skipDelayDuration={700}>\n\t\t\t<TooltipSingletonContext.Provider value={true}>\n\t\t\t\t{children}\n\t\t\t\t<TooltipSingleton />\n\t\t\t</TooltipSingletonContext.Provider>\n\t\t</_Tooltip.Provider>\n\t)\n}\n\n// The singleton tooltip component that renders once\nfunction TooltipSingleton() {\n\tconst editor = useMaybeEditor()\n\tconst [isOpen, setIsOpen] = useState(false)\n\tconst triggerRef = useRef<HTMLDivElement>(null)\n\tconst isFirstShowRef = useRef(true)\n\tconst showTimeoutRef = useRef<number | null>(null)\n\n\tconst currentTooltip = useValue(\n\t\t'current tooltip',\n\t\t() => tooltipManager.getCurrentTooltipData(),\n\t\t[]\n\t)\n\n\t// Update open state and trigger position\n\tuseEffect(() => {\n\t\t// Clear any existing show timeout\n\t\tif (showTimeoutRef.current) {\n\t\t\tclearTimeout(showTimeoutRef.current)\n\t\t\tshowTimeoutRef.current = null\n\t\t}\n\n\t\tif (currentTooltip && triggerRef.current) {\n\t\t\t// Position the invisible trigger element over the active element\n\t\t\tconst activeRect = currentTooltip.targetElement.getBoundingClientRect()\n\t\t\tconst trigger = triggerRef.current\n\n\t\t\ttrigger.style.position = 'fixed'\n\t\t\ttrigger.style.left = `${activeRect.left}px`\n\t\t\ttrigger.style.top = `${activeRect.top}px`\n\t\t\ttrigger.style.width = `${activeRect.width}px`\n\t\t\ttrigger.style.height = `${activeRect.height}px`\n\t\t\ttrigger.style.pointerEvents = 'none'\n\t\t\ttrigger.style.zIndex = '9999'\n\n\t\t\t// Handle delay for first show\n\t\t\tif (isFirstShowRef.current && editor) {\n\t\t\t\tshowTimeoutRef.current = editor.timers.setTimeout(() => {\n\t\t\t\t\tsetIsOpen(true)\n\t\t\t\t\tisFirstShowRef.current = false\n\t\t\t\t}, currentTooltip.delayDuration ?? editor.options.tooltipDelayMs)\n\t\t\t} else {\n\t\t\t\t// Subsequent tooltips show immediately\n\t\t\t\tsetIsOpen(true)\n\t\t\t}\n\t\t} else {\n\t\t\t// Hide tooltip immediately\n\t\t\tsetIsOpen(false)\n\t\t\t// Reset first show state after tooltip is hidden\n\t\t\tisFirstShowRef.current = true\n\t\t}\n\t}, [editor, currentTooltip])\n\n\tif (!currentTooltip) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<_Tooltip.Root open={isOpen} delayDuration={0}>\n\t\t\t<_Tooltip.Trigger asChild>\n\t\t\t\t<div ref={triggerRef} />\n\t\t\t</_Tooltip.Trigger>\n\t\t\t<_Tooltip.Content\n\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\tside={currentTooltip.side}\n\t\t\t\tsideOffset={currentTooltip.sideOffset}\n\t\t\t\tavoidCollisions\n\t\t\t\tcollisionPadding={8}\n\t\t\t\tdir=\"ltr\"\n\t\t\t>\n\t\t\t\t{currentTooltip.content}\n\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t</_Tooltip.Content>\n\t\t</_Tooltip.Root>\n\t)\n}\n\n/** @public @react */\nexport const TldrawUiTooltip = forwardRef<HTMLButtonElement, TldrawUiTooltipProps>(\n\t(\n\t\t{\n\t\t\tchildren,\n\t\t\tcontent,\n\t\t\tside,\n\t\t\tsideOffset = 5,\n\t\t\tdisabled = false,\n\t\t\tshowOnMobile = false,\n\t\t\tdelayDuration,\n\t\t},\n\t\tref\n\t) => {\n\t\tconst editor = useMaybeEditor()\n\t\tconst tooltipId = useRef<string>(uniqueId())\n\t\tconst hasProvider = useContext(TooltipSingletonContext)\n\n\t\tconst orientationCtx = useTldrawUiOrientation()\n\t\tconst sideToUse = side ?? orientationCtx.tooltipSide\n\n\t\tuseEffect(() => {\n\t\t\tconst currentTooltipId = tooltipId.current\n\t\t\treturn () => {\n\t\t\t\tif (hasProvider) {\n\t\t\t\t\ttooltipManager.hideTooltip(editor, currentTooltipId, true)\n\t\t\t\t}\n\t\t\t}\n\t\t}, [editor, hasProvider])\n\n\t\t// Don't show tooltip if disabled, no content, or UI labels are disabled\n\t\tif (disabled || !content) {\n\t\t\treturn <>{children}</>\n\t\t}\n\n\t\t// Fallback to old behavior if no provider\n\t\tif (!hasProvider) {\n\t\t\treturn (\n\t\t\t\t<_Tooltip.Root\n\t\t\t\t\tdelayDuration={\n\t\t\t\t\t\tdelayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)\n\t\t\t\t\t}\n\t\t\t\t\tdisableHoverableContent\n\t\t\t\t>\n\t\t\t\t\t<_Tooltip.Trigger asChild ref={ref}>\n\t\t\t\t\t\t{children}\n\t\t\t\t\t</_Tooltip.Trigger>\n\t\t\t\t\t<_Tooltip.Content\n\t\t\t\t\t\tclassName=\"tlui-tooltip\"\n\t\t\t\t\t\tside={sideToUse}\n\t\t\t\t\t\tsideOffset={sideOffset}\n\t\t\t\t\t\tavoidCollisions\n\t\t\t\t\t\tcollisionPadding={8}\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{content}\n\t\t\t\t\t\t<_Tooltip.Arrow className=\"tlui-tooltip__arrow\" />\n\t\t\t\t\t</_Tooltip.Content>\n\t\t\t\t</_Tooltip.Root>\n\t\t\t)\n\t\t}\n\n\t\tconst child = React.Children.only(children)\n\t\tassert(React.isValidElement(child), 'TldrawUiTooltip children must be a single element')\n\n\t\tconst handleMouseEnter = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseEnter?.(event)\n\t\t\ttooltipManager.showTooltip(\n\t\t\t\ttooltipId.current,\n\t\t\t\tcontent,\n\t\t\t\tevent.currentTarget as HTMLElement,\n\t\t\t\tsideToUse,\n\t\t\t\tsideOffset,\n\t\t\t\tshowOnMobile,\n\t\t\t\tdelayDuration\n\t\t\t)\n\t\t}\n\n\t\tconst handleMouseLeave = (event: React.MouseEvent<HTMLElement>) => {\n\t\t\tchild.props.onMouseLeave?.(event)\n\t\t\ttooltipManager.hideTooltip(editor, tooltipId.current)\n\t\t}\n\n\t\tconst handleFocus = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onFocus?.(event)\n\t\t\ttooltipManager.showTooltip(\n\t\t\t\ttooltipId.current,\n\t\t\t\tcontent,\n\t\t\t\tevent.currentTarget as HTMLElement,\n\t\t\t\tsideToUse,\n\t\t\t\tsideOffset,\n\t\t\t\tshowOnMobile,\n\t\t\t\tdelayDuration\n\t\t\t)\n\t\t}\n\n\t\tconst handleBlur = (event: React.FocusEvent<HTMLElement>) => {\n\t\t\tchild.props.onBlur?.(event)\n\t\t\ttooltipManager.hideTooltip(editor, tooltipId.current)\n\t\t}\n\n\t\tconst childrenWithHandlers = React.cloneElement(children as React.ReactElement, {\n\t\t\tonMouseEnter: handleMouseEnter,\n\t\t\tonMouseLeave: handleMouseLeave,\n\t\t\tonFocus: handleFocus,\n\t\t\tonBlur: handleBlur,\n\t\t})\n\n\t\treturn childrenWithHandlers\n\t}\n)\n"],
+  "mappings": "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",
   "names": []
 }