tldraw 3.16.0-next.34fddf633325 → 3.16.0-next.4337ae1ab96d

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiPopover.tsx"],
-  "sourcesContent": ["import { useContainer } from '@tldraw/editor'\nimport { Popover as _Popover } from 'radix-ui'\nimport React from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\n\n/** @public */\nexport interface TLUiPopoverProps {\n\tid: string\n\topen?: boolean\n\tchildren: React.ReactNode\n\tonOpenChange?(isOpen: boolean): void\n}\n\n/** @public @react */\nexport function TldrawUiPopover({ id, children, onOpenChange, open }: TLUiPopoverProps) {\n\tconst [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange)\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={handleOpenChange} open={open || isOpen /* allow debugging */}>\n\t\t\t<div className=\"tlui-popover\">{children}</div>\n\t\t</_Popover.Root>\n\t)\n}\n\n/** @public */\nexport interface TLUiPopoverTriggerProps {\n\tchildren?: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps) {\n\treturn (\n\t\t<_Popover.Trigger asChild dir=\"ltr\">\n\t\t\t{children}\n\t\t</_Popover.Trigger>\n\t)\n}\n\n/** @public */\nexport interface TLUiPopoverContentProps {\n\tchildren: React.ReactNode\n\tside: 'top' | 'bottom' | 'left' | 'right'\n\talign?: 'start' | 'center' | 'end'\n\talignOffset?: number\n\tsideOffset?: number\n\tdisableEscapeKeyDown?: boolean\n\tautoFocusFirstButton?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiPopoverContent({\n\tside,\n\tchildren,\n\talign = 'center',\n\tsideOffset = 8,\n\talignOffset = 0,\n\tdisableEscapeKeyDown = false,\n\tautoFocusFirstButton = true,\n}: TLUiPopoverContentProps) {\n\tconst container = useContainer()\n\tconst ref = React.useRef<HTMLDivElement>(null)\n\n\tconst handleOpenAutoFocus = React.useCallback(() => {\n\t\tif (!autoFocusFirstButton) return\n\t\tconst buttons = (ref.current?.querySelectorAll('button:not([disabled])') ?? []) as HTMLElement[]\n\t\tconst visibleButtons = [...buttons].filter(\n\t\t\t(button) => button.offsetWidth || button.offsetHeight\n\t\t)\n\t\tconst firstButton = visibleButtons[0]\n\t\tif (firstButton) firstButton.focus()\n\t}, [autoFocusFirstButton])\n\n\treturn (\n\t\t<_Popover.Portal container={container}>\n\t\t\t<_Popover.Content\n\t\t\t\tclassName=\"tlui-popover__content\"\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tref={ref}\n\t\t\t\tonOpenAutoFocus={handleOpenAutoFocus}\n\t\t\t\tonEscapeKeyDown={(e) => disableEscapeKeyDown && e.preventDefault()}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{/* <StyledArrow /> */}\n\t\t\t</_Popover.Content>\n\t\t</_Popover.Portal>\n\t)\n}\n"],
-  "mappings": "AAmBG;AAnBH,SAAS,oBAAoB;AAC7B,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAClB,SAAS,qBAAqB;AAWvB,SAAS,gBAAgB,EAAE,IAAI,UAAU,cAAc,KAAK,GAAqB;AACvF,QAAM,CAAC,QAAQ,gBAAgB,IAAI,cAAc,IAAI,YAAY;AAEjE,SACC,oBAAC,SAAS,MAAT,EAAc,cAAc,kBAAkB,MAAM,QAAQ,QAC5D,8BAAC,SAAI,WAAU,gBAAgB,UAAS,GACzC;AAEF;AAQO,SAAS,uBAAuB,EAAE,SAAS,GAA4B;AAC7E,SACC,oBAAC,SAAS,SAAT,EAAiB,SAAO,MAAC,KAAI,OAC5B,UACF;AAEF;AAcO,SAAS,uBAAuB;AAAA,EACtC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,uBAAuB;AACxB,GAA4B;AAC3B,QAAM,YAAY,aAAa;AAC/B,QAAM,MAAM,MAAM,OAAuB,IAAI;AAE7C,QAAM,sBAAsB,MAAM,YAAY,MAAM;AACnD,QAAI,CAAC,qBAAsB;AAC3B,UAAM,UAAW,IAAI,SAAS,iBAAiB,wBAAwB,KAAK,CAAC;AAC7E,UAAM,iBAAiB,CAAC,GAAG,OAAO,EAAE;AAAA,MACnC,CAAC,WAAW,OAAO,eAAe,OAAO;AAAA,IAC1C;AACA,UAAM,cAAc,eAAe,CAAC;AACpC,QAAI,YAAa,aAAY,MAAM;AAAA,EACpC,GAAG,CAAC,oBAAoB,CAAC;AAEzB,SACC,oBAAC,SAAS,QAAT,EAAgB,WAChB;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAI;AAAA,MACJ;AAAA,MACA,iBAAiB;AAAA,MACjB,iBAAiB,CAAC,MAAM,wBAAwB,EAAE,eAAe;AAAA,MAEhE;AAAA;AAAA,EAEF,GACD;AAEF;",
+  "sourcesContent": ["import { useContainer } from '@tldraw/editor'\nimport classNames from 'classnames'\nimport { Popover as _Popover } from 'radix-ui'\nimport React from 'react'\nimport { useMenuIsOpen } from '../../hooks/useMenuIsOpen'\n\n/** @public */\nexport interface TLUiPopoverProps {\n\tid: string\n\topen?: boolean\n\tchildren: React.ReactNode\n\tonOpenChange?(isOpen: boolean): void\n\tclassName?: string\n}\n\n/** @public @react */\nexport function TldrawUiPopover({ id, children, onOpenChange, open, className }: TLUiPopoverProps) {\n\tconst [isOpen, handleOpenChange] = useMenuIsOpen(id, onOpenChange)\n\n\treturn (\n\t\t<_Popover.Root onOpenChange={handleOpenChange} open={open || isOpen /* allow debugging */}>\n\t\t\t<div className={classNames('tlui-popover', className)}>{children}</div>\n\t\t</_Popover.Root>\n\t)\n}\n\n/** @public */\nexport interface TLUiPopoverTriggerProps {\n\tchildren?: React.ReactNode\n}\n\n/** @public @react */\nexport function TldrawUiPopoverTrigger({ children }: TLUiPopoverTriggerProps) {\n\treturn (\n\t\t<_Popover.Trigger asChild dir=\"ltr\">\n\t\t\t{children}\n\t\t</_Popover.Trigger>\n\t)\n}\n\n/** @public */\nexport interface TLUiPopoverContentProps {\n\tchildren: React.ReactNode\n\tside: 'top' | 'bottom' | 'left' | 'right'\n\talign?: 'start' | 'center' | 'end'\n\talignOffset?: number\n\tsideOffset?: number\n\tdisableEscapeKeyDown?: boolean\n\tautoFocusFirstButton?: boolean\n}\n\n/** @public @react */\nexport function TldrawUiPopoverContent({\n\tside,\n\tchildren,\n\talign = 'center',\n\tsideOffset = 8,\n\talignOffset = 0,\n\tdisableEscapeKeyDown = false,\n\tautoFocusFirstButton = true,\n}: TLUiPopoverContentProps) {\n\tconst container = useContainer()\n\tconst ref = React.useRef<HTMLDivElement>(null)\n\n\tconst handleOpenAutoFocus = React.useCallback(() => {\n\t\tif (!autoFocusFirstButton) return\n\t\tconst buttons = (ref.current?.querySelectorAll('button:not([disabled])') ?? []) as HTMLElement[]\n\t\tconst visibleButtons = [...buttons].filter(\n\t\t\t(button) => button.offsetWidth || button.offsetHeight\n\t\t)\n\t\tconst firstButton = visibleButtons[0]\n\t\tif (firstButton) firstButton.focus()\n\t}, [autoFocusFirstButton])\n\n\treturn (\n\t\t<_Popover.Portal container={container}>\n\t\t\t<_Popover.Content\n\t\t\t\tclassName=\"tlui-popover__content\"\n\t\t\t\tside={side}\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\talign={align}\n\t\t\t\talignOffset={alignOffset}\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tref={ref}\n\t\t\t\tonOpenAutoFocus={handleOpenAutoFocus}\n\t\t\t\tonEscapeKeyDown={(e) => disableEscapeKeyDown && e.preventDefault()}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t\t{/* <StyledArrow /> */}\n\t\t\t</_Popover.Content>\n\t\t</_Popover.Portal>\n\t)\n}\n"],
+  "mappings": "AAqBG;AArBH,SAAS,oBAAoB;AAC7B,OAAO,gBAAgB;AACvB,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAClB,SAAS,qBAAqB;AAYvB,SAAS,gBAAgB,EAAE,IAAI,UAAU,cAAc,MAAM,UAAU,GAAqB;AAClG,QAAM,CAAC,QAAQ,gBAAgB,IAAI,cAAc,IAAI,YAAY;AAEjE,SACC,oBAAC,SAAS,MAAT,EAAc,cAAc,kBAAkB,MAAM,QAAQ,QAC5D,8BAAC,SAAI,WAAW,WAAW,gBAAgB,SAAS,GAAI,UAAS,GAClE;AAEF;AAQO,SAAS,uBAAuB,EAAE,SAAS,GAA4B;AAC7E,SACC,oBAAC,SAAS,SAAT,EAAiB,SAAO,MAAC,KAAI,OAC5B,UACF;AAEF;AAcO,SAAS,uBAAuB;AAAA,EACtC;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,aAAa;AAAA,EACb,cAAc;AAAA,EACd,uBAAuB;AAAA,EACvB,uBAAuB;AACxB,GAA4B;AAC3B,QAAM,YAAY,aAAa;AAC/B,QAAM,MAAM,MAAM,OAAuB,IAAI;AAE7C,QAAM,sBAAsB,MAAM,YAAY,MAAM;AACnD,QAAI,CAAC,qBAAsB;AAC3B,UAAM,UAAW,IAAI,SAAS,iBAAiB,wBAAwB,KAAK,CAAC;AAC7E,UAAM,iBAAiB,CAAC,GAAG,OAAO,EAAE;AAAA,MACnC,CAAC,WAAW,OAAO,eAAe,OAAO;AAAA,IAC1C;AACA,UAAM,cAAc,eAAe,CAAC;AACpC,QAAI,YAAa,aAAY,MAAM;AAAA,EACpC,GAAG,CAAC,oBAAoB,CAAC;AAEzB,SACC,oBAAC,SAAS,QAAT,EAAgB,WAChB;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA,WAAU;AAAA,MACV;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA,KAAI;AAAA,MACJ;AAAA,MACA,iBAAiB;AAAA,MACjB,iBAAiB,CAAC,MAAM,wBAAwB,EAAE,eAAe;AAAA,MAEhE;AAAA;AAAA,EAEF,GACD;AAEF;",
   "names": []
 }

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

@@ -1,7 +1,9 @@
 import { jsx, jsxs } from "react/jsx-runtime";
+import { tltime } from "@tldraw/editor";
 import { Slider as _Slider } from "radix-ui";
 import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "../../hooks/useTranslation/useTranslation.mjs";
+import { TldrawUiTooltip, tooltipManager } from "./TldrawUiTooltip.mjs";
 const TldrawUiSlider = React.forwardRef(function Slider({
   onHistoryMark,
   title,
@@ -14,6 +16,7 @@ const TldrawUiSlider = React.forwardRef(function Slider({
   ariaValueModifier = 1
 }, ref) {
   const msg = useTranslation();
+  const [titleAndLabel, setTitleAndLabel] = useState("");
   const [tabIndex, setTabIndex] = useState(-1);
   useEffect(() => {
     setTabIndex(0);
@@ -25,14 +28,25 @@ const TldrawUiSlider = React.forwardRef(function Slider({
     [onValueChange]
   );
   const handlePointerDown = useCallback(() => {
+    tooltipManager.hideAllTooltips();
     onHistoryMark("click slider");
   }, [onHistoryMark]);
+  useEffect(() => {
+    const timeout = tltime.setTimeout(
+      "set title and label",
+      () => {
+        setTitleAndLabel(title + " \u2014 " + msg(label));
+      },
+      0
+    );
+    return () => clearTimeout(timeout);
+  }, [label, msg, title]);
   const handleKeyEvent = useCallback((event) => {
     if (event.key === "Tab") {
       event.stopPropagation();
     }
   }, []);
-  return /* @__PURE__ */ jsx("div", { className: "tlui-slider__container", children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "tlui-slider__container", children: /* @__PURE__ */ jsx(TldrawUiTooltip, { content: titleAndLabel, children: /* @__PURE__ */ jsxs(
     _Slider.Root,
     {
       "data-testid": testId,
@@ -46,7 +60,6 @@ const TldrawUiSlider = React.forwardRef(function Slider({
       onValueChange: handleValueChange,
       onKeyDownCapture: handleKeyEvent,
       onKeyUpCapture: handleKeyEvent,
-      title: title + " \u2014 " + msg(label),
       children: [
         /* @__PURE__ */ jsx(_Slider.Track, { className: "tlui-slider__track", dir: "ltr", children: value !== null && /* @__PURE__ */ jsx(_Slider.Range, { className: "tlui-slider__range", dir: "ltr" }) }),
         value !== null && /* @__PURE__ */ jsx(
@@ -55,7 +68,7 @@ const TldrawUiSlider = React.forwardRef(function Slider({
             "aria-valuemin": (min ?? 0) * ariaValueModifier,
             "aria-valuenow": value * ariaValueModifier,
             "aria-valuemax": steps * ariaValueModifier,
-            "aria-label": title + " \u2014 " + msg(label),
+            "aria-label": titleAndLabel,
             className: "tlui-slider__thumb",
             dir: "ltr",
             ref,
@@ -64,7 +77,7 @@ const TldrawUiSlider = React.forwardRef(function Slider({
         )
       ]
     }
-  ) });
+  ) }) });
 });
 export {
   TldrawUiSlider

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

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiSlider.tsx"],
-  "sourcesContent": ["import { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<_Slider.Root\n\t\t\t\tdata-testid={testId}\n\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\tdir=\"ltr\"\n\t\t\t\tmin={min ?? 0}\n\t\t\t\tmax={steps}\n\t\t\t\tstep={1}\n\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\ttitle={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t>\n\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t</_Slider.Track>\n\t\t\t\t{value !== null && (\n\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\taria-label={title + ' \u2014 ' + msg(label as TLUiTranslationKey)}\n\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</_Slider.Root>\n\t\t</div>\n\t)\n})\n"],
-  "mappings": "AAkEG,SAeqB,KAfrB;AAlEH,SAAS,UAAU,eAAe;AAClC,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAExD,SAAS,sBAAsB;AAgBxB,MAAM,iBAAiB,MAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,MAAM,eAAe;AAK3B,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,YAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACzB,CAACA,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC3C,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,QAAM,iBAAiB,YAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,oBAAC,SAAI,WAAU,0BACd;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAChB,OAAO,QAAQ,aAAQ,IAAI,KAA2B;AAAA,MAEtD;AAAA,4BAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,oBAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,cAAY,QAAQ,aAAQ,IAAI,KAA2B;AAAA,YAC3D,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD;AAEF,CAAC;",
+  "sourcesContent": ["import { tltime } from '@tldraw/editor'\nimport { Slider as _Slider } from 'radix-ui'\nimport React, { useCallback, useEffect, useState } from 'react'\nimport { TLUiTranslationKey } from '../../hooks/useTranslation/TLUiTranslationKey'\nimport { useTranslation } from '../../hooks/useTranslation/useTranslation'\nimport { TldrawUiTooltip, tooltipManager } from './TldrawUiTooltip'\n\n/** @public */\nexport interface TLUiSliderProps {\n\tmin?: number\n\tsteps: number\n\tvalue: number | null\n\tlabel: string\n\ttitle: string\n\tonValueChange(value: number): void\n\tonHistoryMark(id: string): void\n\t'data-testid'?: string\n\tariaValueModifier?: number\n}\n\n/** @public @react */\nexport const TldrawUiSlider = React.forwardRef<HTMLDivElement, TLUiSliderProps>(function Slider(\n\t{\n\t\tonHistoryMark,\n\t\ttitle,\n\t\tmin,\n\t\tsteps,\n\t\tvalue,\n\t\tlabel,\n\t\tonValueChange,\n\t\t['data-testid']: testId,\n\t\tariaValueModifier = 1,\n\t}: TLUiSliderProps,\n\tref\n) {\n\tconst msg = useTranslation()\n\tconst [titleAndLabel, setTitleAndLabel] = useState('')\n\n\t// XXX: Radix starts out our slider with a tabIndex of 0\n\t// This causes some tab focusing issues, most prevelant in MobileStylePanel,\n\t// where it grabs the focus. This works around it.\n\tconst [tabIndex, setTabIndex] = useState(-1)\n\tuseEffect(() => {\n\t\tsetTabIndex(0)\n\t}, [])\n\n\tconst handleValueChange = useCallback(\n\t\t(value: number[]) => {\n\t\t\tonValueChange(value[0])\n\t\t},\n\t\t[onValueChange]\n\t)\n\n\tconst handlePointerDown = useCallback(() => {\n\t\ttooltipManager.hideAllTooltips()\n\t\tonHistoryMark('click slider')\n\t}, [onHistoryMark])\n\n\t// N.B. This is a bit silly. The Radix slider auto-focuses which\n\t// triggers TldrawUiTooltip handleFocus when we dbl-click to edit an image,\n\t// which in turn makes the tooltip display prematurely.\n\t// This makes it wait until we've focused to show the tooltip.\n\tuseEffect(() => {\n\t\tconst timeout = tltime.setTimeout(\n\t\t\t'set title and label',\n\t\t\t() => {\n\t\t\t\tsetTitleAndLabel(title + ' \u2014 ' + msg(label as TLUiTranslationKey))\n\t\t\t},\n\t\t\t0\n\t\t)\n\t\treturn () => clearTimeout(timeout)\n\t}, [label, msg, title])\n\n\t// N.B. Annoying. For a11y purposes, we need Tab to work.\n\t// For some reason, Radix has some custom behavior here\n\t// that interferes with tabbing past the slider and then\n\t// you get stuck in the slider.\n\tconst handleKeyEvent = useCallback((event: React.KeyboardEvent) => {\n\t\tif (event.key === 'Tab') {\n\t\t\tevent.stopPropagation()\n\t\t}\n\t}, [])\n\n\treturn (\n\t\t<div className=\"tlui-slider__container\">\n\t\t\t<TldrawUiTooltip content={titleAndLabel}>\n\t\t\t\t<_Slider.Root\n\t\t\t\t\tdata-testid={testId}\n\t\t\t\t\tclassName=\"tlui-slider\"\n\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\tmin={min ?? 0}\n\t\t\t\t\tmax={steps}\n\t\t\t\t\tstep={1}\n\t\t\t\t\tvalue={value !== null ? [value] : undefined}\n\t\t\t\t\tonPointerDown={handlePointerDown}\n\t\t\t\t\tonValueChange={handleValueChange}\n\t\t\t\t\tonKeyDownCapture={handleKeyEvent}\n\t\t\t\t\tonKeyUpCapture={handleKeyEvent}\n\t\t\t\t>\n\t\t\t\t\t<_Slider.Track className=\"tlui-slider__track\" dir=\"ltr\">\n\t\t\t\t\t\t{value !== null && <_Slider.Range className=\"tlui-slider__range\" dir=\"ltr\" />}\n\t\t\t\t\t</_Slider.Track>\n\t\t\t\t\t{value !== null && (\n\t\t\t\t\t\t<_Slider.Thumb\n\t\t\t\t\t\t\taria-valuemin={(min ?? 0) * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuenow={value * ariaValueModifier}\n\t\t\t\t\t\t\taria-valuemax={steps * ariaValueModifier}\n\t\t\t\t\t\t\taria-label={titleAndLabel}\n\t\t\t\t\t\t\tclassName=\"tlui-slider__thumb\"\n\t\t\t\t\t\t\tdir=\"ltr\"\n\t\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\t\ttabIndex={tabIndex}\n\t\t\t\t\t\t/>\n\t\t\t\t\t)}\n\t\t\t\t</_Slider.Root>\n\t\t\t</TldrawUiTooltip>\n\t\t</div>\n\t)\n})\n"],
+  "mappings": "AAsFI,SAcqB,KAdrB;AAtFJ,SAAS,cAAc;AACvB,SAAS,UAAU,eAAe;AAClC,OAAO,SAAS,aAAa,WAAW,gBAAgB;AAExD,SAAS,sBAAsB;AAC/B,SAAS,iBAAiB,sBAAsB;AAgBzC,MAAM,iBAAiB,MAAM,WAA4C,SAAS,OACxF;AAAA,EACC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,CAAC,aAAa,GAAG;AAAA,EACjB,oBAAoB;AACrB,GACA,KACC;AACD,QAAM,MAAM,eAAe;AAC3B,QAAM,CAAC,eAAe,gBAAgB,IAAI,SAAS,EAAE;AAKrD,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,EAAE;AAC3C,YAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAoB;AAAA,IACzB,CAACA,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,oBAAoB,YAAY,MAAM;AAC3C,mBAAe,gBAAgB;AAC/B,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,YAAU,MAAM;AACf,UAAM,UAAU,OAAO;AAAA,MACtB;AAAA,MACA,MAAM;AACL,yBAAiB,QAAQ,aAAQ,IAAI,KAA2B,CAAC;AAAA,MAClE;AAAA,MACA;AAAA,IACD;AACA,WAAO,MAAM,aAAa,OAAO;AAAA,EAClC,GAAG,CAAC,OAAO,KAAK,KAAK,CAAC;AAMtB,QAAM,iBAAiB,YAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,oBAAC,SAAI,WAAU,0BACd,8BAAC,mBAAgB,SAAS,eACzB;AAAA,IAAC,QAAQ;AAAA,IAAR;AAAA,MACA,eAAa;AAAA,MACb,WAAU;AAAA,MACV,KAAI;AAAA,MACJ,KAAK,OAAO;AAAA,MACZ,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO,UAAU,OAAO,CAAC,KAAK,IAAI;AAAA,MAClC,eAAe;AAAA,MACf,eAAe;AAAA,MACf,kBAAkB;AAAA,MAClB,gBAAgB;AAAA,MAEhB;AAAA,4BAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,oBAAC,QAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,QAAQ;AAAA,UAAR;AAAA,YACA,kBAAgB,OAAO,KAAK;AAAA,YAC5B,iBAAe,QAAQ;AAAA,YACvB,iBAAe,QAAQ;AAAA,YACvB,cAAY;AAAA,YACZ,WAAU;AAAA,YACV,KAAI;AAAA,YACJ;AAAA,YACA;AAAA;AAAA,QACD;AAAA;AAAA;AAAA,EAEF,GACD,GACD;AAEF,CAAC;",
   "names": ["value"]
 }

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

@@ -2,19 +2,34 @@ import { jsx } from "react/jsx-runtime";
 import classnames from "classnames";
 import { Toolbar as _Toolbar } from "radix-ui";
 import React from "react";
+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, ...props }, ref) => {
-    return /* @__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,
         ...props,
-        className: classnames("tlui-toolbar-container", className),
+        className: classnames("tlui-toolbar", className),
         "aria-label": label,
+        orientation: orientation === "grid" ? "horizontal" : orientation,
         children
       }
-    );
+    ) });
   }
 );
 const TldrawUiToolbarButton = React.forwardRef(
@@ -40,11 +55,13 @@ const TldrawUiToolbarToggleGroup = ({
   children,
   className,
   type,
+  asChild,
   ...props
 }) => {
   return /* @__PURE__ */ jsx(
     _Toolbar.ToggleGroup,
     {
+      asChild,
       type,
       ...props,
       role: "radiogroup",

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 { 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}\n\n/** @public @react */\nexport const TldrawUiToolbar = React.forwardRef<HTMLDivElement, TLUiToolbarProps>(\n\t({ children, className, label, ...props }: TLUiToolbarProps, ref) => {\n\t\treturn (\n\t\t\t<_Toolbar.Root\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t\tclassName={classnames('tlui-toolbar-container', className)}\n\t\t\t\taria-label={label}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</_Toolbar.Root>\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": "AAiBG;AAjBH,OAAO,gBAAgB;AACvB,SAAS,WAAW,gBAAgB;AACpC,OAAO,WAAW;AAClB,SAAS,uBAAuB;AAWzB,MAAM,kBAAkB,MAAM;AAAA,EACpC,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAqB,QAAQ;AACpE,WACC;AAAA,MAAC,SAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,WAAW,WAAW,0BAA0B,SAAS;AAAA,QACzD,cAAY;AAAA,QAEX;AAAA;AAAA,IACF;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\tasChild?: boolean\n}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleGroup = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tasChild,\n\t...props\n}: TLUiToolbarToggleGroupProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleGroup\n\t\t\tasChild={asChild}\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;AAeO,MAAM,6BAA6B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAmC;AAClC,SACC;AAAA,IAAC,SAAS;AAAA,IAAT;AAAA,MACA;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,68 +1,75 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { 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) {
-    if (this.currentTooltipId === tooltipId) {
-      if (this.editor) {
-        this.destroyTimeoutId = this.editor.timers.setTimeout(() => {
-          this.currentTooltipId = null;
-          this.currentContent = "";
-          this.activeElement = null;
-          this.destroyTimeoutId = null;
-          this.notify();
-        }, 300);
+  hideTooltip(editor, tooltipId, instant = false) {
+    const hide = () => {
+      if (this.currentTooltip.get()?.id === tooltipId) {
+        this.currentTooltip.set(null);
+        this.destroyTimeoutId = null;
       }
+    };
+    if (editor && !instant) {
+      this.destroyTimeoutId = editor.timers.setTimeout(hide, 300);
+    } else {
+      hide();
     }
   }
+  hideAllTooltips() {
+    this.currentTooltip.set(null);
+    this.destroyTimeoutId = null;
+  }
   getCurrentTooltipData() {
-    return {
-      id: this.currentTooltipId,
-      content: this.currentContent,
-      side: this.currentSide,
-      sideOffset: this.currentSideOffset,
-      element: this.activeElement
-    };
+    const currentTooltip = this.currentTooltip.get();
+    if (!currentTooltip) return null;
+    if (!this.supportsHover() && !currentTooltip.showOnMobile) return null;
+    return currentTooltip;
+  }
+  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();
@@ -74,45 +81,26 @@ 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);
-  useEffect(() => {
-    tooltipManager.setEditor(editor);
-  }, [editor]);
-  useEffect(() => {
-    const unsubscribe = tooltipManager.subscribe(() => {
-      forceUpdate({});
-    });
-    return unsubscribe;
-  }, []);
-  const tooltipData = tooltipManager.getCurrentTooltipData();
+  const editor = useMaybeEditor();
+  const currentTooltip = useValue(
+    "current tooltip",
+    () => tooltipManager.getCurrentTooltipData(),
+    []
+  );
+  const cameraState = useValue("camera state", () => editor?.getCameraState(), [editor]);
   useEffect(() => {
-    const shouldBeOpen = Boolean(tooltipData.id && tooltipData.element);
-    if (showTimeoutRef.current) {
-      clearTimeout(showTimeoutRef.current);
-      showTimeoutRef.current = null;
+    if (cameraState === "moving" && isOpen && currentTooltip) {
+      tooltipManager.hideTooltip(editor, currentTooltip.id, true);
     }
-    if (shouldBeOpen && tooltipData.element && triggerRef.current) {
-      const activeRect = tooltipData.element.getBoundingClientRect();
+  }, [cameraState, isOpen, currentTooltip, editor]);
+  useEffect(() => {
+    let timer = null;
+    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`;
@@ -120,22 +108,25 @@ function TooltipSingleton() {
       trigger.style.height = `${activeRect.height}px`;
       trigger.style.pointerEvents = "none";
       trigger.style.zIndex = "9999";
-      if (isFirstShowRef.current && editor) {
-        showTimeoutRef.current = editor.timers.setTimeout(() => {
+      if (isFirstShowRef.current) {
+        timer = setTimeout(() => {
           setIsOpen(true);
           isFirstShowRef.current = false;
-        }, editor.options.tooltipDelayMs);
+        }, currentTooltip.delayDuration);
       } 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) {
+    return () => {
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+    };
+  }, [currentTooltip]);
+  if (!currentTooltip) {
     return null;
   }
   return /* @__PURE__ */ jsxs(_Tooltip.Root, { open: isOpen, delayDuration: 0, children: [
@@ -144,94 +135,112 @@ 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 });
+    }
+    const delayDurationToUse = delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS);
+    if (!hasProvider) {
+      return /* @__PURE__ */ jsxs(_Tooltip.Root, { delayDuration: delayDurationToUse, 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,
+        delayDurationToUse
+      );
+    };
+    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,
+        delayDurationToUse
+      );
+    };
+    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 handleMouseEnter = (event) => {
-    tooltipManager.showTooltip(
-      tooltipId.current,
-      content,
-      event.currentTarget,
-      side,
-      sideOffset
-    );
-  };
-  const handleMouseLeave = () => {
-    tooltipManager.hideTooltip(tooltipId.current);
-  };
-  const handleFocus = (event) => {
-    tooltipManager.showTooltip(
-      tooltipId.current,
-      content,
-      event.currentTarget,
-      side,
-      sideOffset
-    );
-  };
-  const handleBlur = () => {
-    tooltipManager.hideTooltip(tooltipId.current);
-  };
-  const childrenWithHandlers = React.cloneElement(children, {
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    onFocus: handleFocus,
-    onBlur: handleBlur
-  });
-  return childrenWithHandlers;
-}
+);
 export {
   TldrawUiTooltip,
-  TldrawUiTooltipProvider
+  TldrawUiTooltipProvider,
+  tooltipManager
 };
 //# sourceMappingURL=TldrawUiTooltip.mjs.map