tldraw 3.16.0-canary.146e95b93256 → 3.16.0-canary.1647ca5bba28

package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js

@@ -35,12 +35,13 @@ __export(TldrawUiPopover_exports, {
 module.exports = __toCommonJS(TldrawUiPopover_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_editor = require("@tldraw/editor");
+var import_classnames = __toESM(require("classnames"));
 var import_radix_ui = require("radix-ui");
 var import_react = __toESM(require("react"));
 var import_useMenuIsOpen = require("../../hooks/useMenuIsOpen");
-function TldrawUiPopover({ id, children, onOpenChange, open }) {
+function TldrawUiPopover({ id, children, onOpenChange, open, className }) {
   const [isOpen, handleOpenChange] = (0, import_useMenuIsOpen.useMenuIsOpen)(id, onOpenChange);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Popover.Root, { onOpenChange: handleOpenChange, open: open || isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-popover", children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Popover.Root, { onOpenChange: handleOpenChange, open: open || isOpen, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_classnames.default)("tlui-popover", className), children }) });
 }
 function TldrawUiPopoverTrigger({ children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Popover.Trigger, { asChild: true, dir: "ltr", children });

package/dist-cjs/lib/ui/components/primitives/TldrawUiPopover.js.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAmBG;AAnBH,oBAA6B;AAC7B,sBAAoC;AACpC,mBAAkB;AAClB,2BAA8B;AAWvB,SAAS,gBAAgB,EAAE,IAAI,UAAU,cAAc,KAAK,GAAqB;AACvF,QAAM,CAAC,QAAQ,gBAAgB,QAAI,oCAAc,IAAI,YAAY;AAEjE,SACC,4CAAC,gBAAAA,QAAS,MAAT,EAAc,cAAc,kBAAkB,MAAM,QAAQ,QAC5D,sDAAC,SAAI,WAAU,gBAAgB,UAAS,GACzC;AAEF;AAQO,SAAS,uBAAuB,EAAE,SAAS,GAA4B;AAC7E,SACC,4CAAC,gBAAAA,QAAS,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,gBAAY,4BAAa;AAC/B,QAAM,MAAM,aAAAC,QAAM,OAAuB,IAAI;AAE7C,QAAM,sBAAsB,aAAAA,QAAM,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,4CAAC,gBAAAD,QAAS,QAAT,EAAgB,WAChB;AAAA,IAAC,gBAAAA,QAAS;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": ["_Popover", "React"]
+  "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBG;AArBH,oBAA6B;AAC7B,wBAAuB;AACvB,sBAAoC;AACpC,mBAAkB;AAClB,2BAA8B;AAYvB,SAAS,gBAAgB,EAAE,IAAI,UAAU,cAAc,MAAM,UAAU,GAAqB;AAClG,QAAM,CAAC,QAAQ,gBAAgB,QAAI,oCAAc,IAAI,YAAY;AAEjE,SACC,4CAAC,gBAAAA,QAAS,MAAT,EAAc,cAAc,kBAAkB,MAAM,QAAQ,QAC5D,sDAAC,SAAI,eAAW,kBAAAC,SAAW,gBAAgB,SAAS,GAAI,UAAS,GAClE;AAEF;AAQO,SAAS,uBAAuB,EAAE,SAAS,GAA4B;AAC7E,SACC,4CAAC,gBAAAD,QAAS,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,gBAAY,4BAAa;AAC/B,QAAM,MAAM,aAAAE,QAAM,OAAuB,IAAI;AAE7C,QAAM,sBAAsB,aAAAA,QAAM,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,4CAAC,gBAAAF,QAAS,QAAT,EAAgB,WAChB;AAAA,IAAC,gBAAAA,QAAS;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": ["_Popover", "classNames", "React"]
 }

package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js

@@ -32,9 +32,11 @@ __export(TldrawUiSlider_exports, {
 });
 module.exports = __toCommonJS(TldrawUiSlider_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@tldraw/editor");
 var import_radix_ui = require("radix-ui");
 var import_react = __toESM(require("react"));
 var import_useTranslation = require("../../hooks/useTranslation/useTranslation");
+var import_TldrawUiTooltip = require("./TldrawUiTooltip");
 const TldrawUiSlider = import_react.default.forwardRef(function Slider({
   onHistoryMark,
   title,
@@ -47,6 +49,7 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
   ariaValueModifier = 1
 }, ref) {
   const msg = (0, import_useTranslation.useTranslation)();
+  const [titleAndLabel, setTitleAndLabel] = (0, import_react.useState)("");
   const [tabIndex, setTabIndex] = (0, import_react.useState)(-1);
   (0, import_react.useEffect)(() => {
     setTabIndex(0);
@@ -58,14 +61,25 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
     [onValueChange]
   );
   const handlePointerDown = (0, import_react.useCallback)(() => {
+    import_TldrawUiTooltip.tooltipManager.hideAllTooltips();
     onHistoryMark("click slider");
   }, [onHistoryMark]);
+  (0, import_react.useEffect)(() => {
+    const timeout = import_editor.tltime.setTimeout(
+      "set title and label",
+      () => {
+        setTitleAndLabel(title + " \u2014 " + msg(label));
+      },
+      0
+    );
+    return () => clearTimeout(timeout);
+  }, [label, msg, title]);
   const handleKeyEvent = (0, import_react.useCallback)((event) => {
     if (event.key === "Tab") {
       event.stopPropagation();
     }
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-slider__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "tlui-slider__container", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiTooltip.TldrawUiTooltip, { content: titleAndLabel, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     import_radix_ui.Slider.Root,
     {
       "data-testid": testId,
@@ -79,7 +93,6 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
       onValueChange: handleValueChange,
       onKeyDownCapture: handleKeyEvent,
       onKeyUpCapture: handleKeyEvent,
-      title: title + " \u2014 " + msg(label),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slider.Track, { className: "tlui-slider__track", dir: "ltr", children: value !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slider.Range, { className: "tlui-slider__range", dir: "ltr" }) }),
         value !== null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
@@ -88,7 +101,7 @@ const TldrawUiSlider = import_react.default.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,
@@ -97,6 +110,6 @@ const TldrawUiSlider = import_react.default.forwardRef(function Slider({
         )
       ]
     }
-  ) });
+  ) }) });
 });
 //# sourceMappingURL=TldrawUiSlider.js.map

package/dist-cjs/lib/ui/components/primitives/TldrawUiSlider.js.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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkEG;AAlEH,sBAAkC;AAClC,mBAAwD;AAExD,4BAA+B;AAgBxB,MAAM,iBAAiB,aAAAA,QAAM,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,UAAM,sCAAe;AAK3B,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,8BAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAoB;AAAA,IACzB,CAACC,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,wBAAoB,0BAAY,MAAM;AAC3C,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,QAAM,qBAAiB,0BAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,4CAAC,SAAI,WAAU,0BACd;AAAA,IAAC,gBAAAC,OAAQ;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,oDAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,4CAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,gBAAAA,OAAQ;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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAsFI;AAtFJ,oBAAuB;AACvB,sBAAkC;AAClC,mBAAwD;AAExD,4BAA+B;AAC/B,6BAAgD;AAgBzC,MAAM,iBAAiB,aAAAA,QAAM,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,UAAM,sCAAe;AAC3B,QAAM,CAAC,eAAe,gBAAgB,QAAI,uBAAS,EAAE;AAKrD,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,EAAE;AAC3C,8BAAU,MAAM;AACf,gBAAY,CAAC;AAAA,EACd,GAAG,CAAC,CAAC;AAEL,QAAM,wBAAoB;AAAA,IACzB,CAACC,WAAoB;AACpB,oBAAcA,OAAM,CAAC,CAAC;AAAA,IACvB;AAAA,IACA,CAAC,aAAa;AAAA,EACf;AAEA,QAAM,wBAAoB,0BAAY,MAAM;AAC3C,0CAAe,gBAAgB;AAC/B,kBAAc,cAAc;AAAA,EAC7B,GAAG,CAAC,aAAa,CAAC;AAMlB,8BAAU,MAAM;AACf,UAAM,UAAU,qBAAO;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,qBAAiB,0BAAY,CAAC,UAA+B;AAClE,QAAI,MAAM,QAAQ,OAAO;AACxB,YAAM,gBAAgB;AAAA,IACvB;AAAA,EACD,GAAG,CAAC,CAAC;AAEL,SACC,4CAAC,SAAI,WAAU,0BACd,sDAAC,0CAAgB,SAAS,eACzB;AAAA,IAAC,gBAAAC,OAAQ;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,oDAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAChD,oBAAU,QAAQ,4CAAC,gBAAAA,OAAQ,OAAR,EAAc,WAAU,sBAAqB,KAAI,OAAM,GAC5E;AAAA,QACC,UAAU,QACV;AAAA,UAAC,gBAAAA,OAAQ;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": ["React", "value", "_Slider"]
 }

package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js

@@ -38,23 +38,39 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_classnames = __toESM(require("classnames"));
 var import_radix_ui = require("radix-ui");
 var import_react = __toESM(require("react"));
+var import_layout = require("./layout");
+var import_TldrawUiTooltip = require("./TldrawUiTooltip");
+const LayoutByOrientation = {
+  horizontal: import_layout.TldrawUiRow,
+  vertical: import_layout.TldrawUiColumn,
+  grid: import_layout.TldrawUiGrid
+};
 const TldrawUiToolbar = import_react.default.forwardRef(
-  ({ children, className, label, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  ({
+    children,
+    className,
+    label,
+    orientation = "horizontal",
+    tooltipSide,
+    ...props
+  }, ref) => {
+    const Layout = LayoutByOrientation[orientation];
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Layout, { asChild: true, tooltipSide, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_radix_ui.Toolbar.Root,
       {
         ref,
         ...props,
-        className: (0, import_classnames.default)("tlui-toolbar-container", className),
+        className: (0, import_classnames.default)("tlui-toolbar", className),
         "aria-label": label,
+        orientation: orientation === "grid" ? "horizontal" : orientation,
         children
       }
-    );
+    ) });
   }
 );
 const TldrawUiToolbarButton = import_react.default.forwardRef(
-  ({ asChild, children, type, isActive, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  ({ asChild, children, type, isActive, tooltip, ...props }, ref) => {
+    const button = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       import_radix_ui.Toolbar.Button,
       {
         ref,
@@ -62,10 +78,13 @@ const TldrawUiToolbarButton = import_react.default.forwardRef(
         draggable: false,
         "data-isactive": isActive,
         ...props,
+        title: void 0,
         className: (0, import_classnames.default)("tlui-button", `tlui-button__${type}`, props.className),
         children
       }
     );
+    const tooltipContent = tooltip || props.title;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiTooltip.TldrawUiTooltip, { content: tooltipContent, children: button });
   }
 );
 const TldrawUiToolbarToggleGroup = ({
@@ -90,12 +109,14 @@ const TldrawUiToolbarToggleItem = ({
   className,
   type,
   value,
+  tooltip,
   ...props
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const toggleItem = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     import_radix_ui.Toolbar.ToggleItem,
     {
       ...props,
+      title: void 0,
       className: (0, import_classnames.default)(
         "tlui-button",
         `tlui-button__${type}`,
@@ -106,5 +127,7 @@ const TldrawUiToolbarToggleItem = ({
       children
     }
   );
+  const tooltipContent = tooltip || props.title;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_TldrawUiTooltip.TldrawUiTooltip, { content: tooltipContent, children: toggleItem });
 };
 //# sourceMappingURL=TldrawUiToolbar.js.map

package/dist-cjs/lib/ui/components/primitives/TldrawUiToolbar.js.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'\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}\n\n/** @public @react */\nexport const TldrawUiToolbarButton = React.forwardRef<HTMLButtonElement, TLUiToolbarButtonProps>(\n\t({ asChild, children, type, isActive, ...props }: TLUiToolbarButtonProps, ref) => {\n\t\treturn (\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\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\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}\n\n/** @public @react */\nexport const TldrawUiToolbarToggleItem = ({\n\tchildren,\n\tclassName,\n\ttype,\n\tvalue,\n\t...props\n}: TLUiToolbarToggleItemProps) => {\n\treturn (\n\t\t<_Toolbar.ToggleItem\n\t\t\t{...props}\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"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBG;AAhBH,wBAAuB;AACvB,sBAAoC;AACpC,mBAAkB;AAWX,MAAM,kBAAkB,aAAAA,QAAM;AAAA,EACpC,CAAC,EAAE,UAAU,WAAW,OAAO,GAAG,MAAM,GAAqB,QAAQ;AACpE,WACC;AAAA,MAAC,gBAAAC,QAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,eAAW,kBAAAC,SAAW,0BAA0B,SAAS;AAAA,QACzD,cAAY;AAAA,QAEX;AAAA;AAAA,IACF;AAAA,EAEF;AACD;AAaO,MAAM,wBAAwB,aAAAF,QAAM;AAAA,EAC1C,CAAC,EAAE,SAAS,UAAU,MAAM,UAAU,GAAG,MAAM,GAA2B,QAAQ;AACjF,WACC;AAAA,MAAC,gBAAAC,QAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,iBAAe;AAAA,QACd,GAAG;AAAA,QACJ,eAAW,kBAAAC,SAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,QAE3E;AAAA;AAAA,IACF;AAAA,EAEF;AACD;AAcO,MAAM,6BAA6B,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAmC;AAClC,SACC;AAAA,IAAC,gBAAAD,QAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAIJ,MAAK;AAAA,MACL,eAAW,kBAAAC,SAAW,6BAA6B,SAAS;AAAA,MAE3D;AAAA;AAAA,EACF;AAEF;AAWO,MAAM,4BAA4B,CAAC;AAAA,EACzC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACJ,MAAkC;AACjC,SACC;AAAA,IAAC,gBAAAD,QAAS;AAAA,IAAT;AAAA,MACC,GAAG;AAAA,MACJ,eAAW,kBAAAC;AAAA,QACV;AAAA,QACA,gBAAgB,IAAI;AAAA,QACpB;AAAA,QACA;AAAA,MACD;AAAA,MACA;AAAA,MAEC;AAAA;AAAA,EACF;AAEF;",
+  "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": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsCI;AAtCJ,wBAAuB;AACvB,sBAAoC;AACpC,mBAAkB;AAClB,oBAA0D;AAC1D,6BAAgC;AAYhC,MAAM,sBAAsB;AAAA,EAC3B,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,MAAM;AACP;AAGO,MAAM,kBAAkB,aAAAA,QAAM;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,4CAAC,UAAO,SAAO,MAAC,aACf;AAAA,MAAC,gBAAAC,QAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACC,GAAG;AAAA,QACJ,eAAW,kBAAAC,SAAW,gBAAgB,SAAS;AAAA,QAC/C,cAAY;AAAA,QACZ,aAAa,gBAAgB,SAAS,eAAe;AAAA,QAEpD;AAAA;AAAA,IACF,GACD;AAAA,EAEF;AACD;AAcO,MAAM,wBAAwB,aAAAF,QAAM;AAAA,EAC1C,CAAC,EAAE,SAAS,UAAU,MAAM,UAAU,SAAS,GAAG,MAAM,GAA2B,QAAQ;AAC1F,UAAM,SACL;AAAA,MAAC,gBAAAC,QAAS;AAAA,MAAT;AAAA,QACA;AAAA,QACA;AAAA,QACA,WAAW;AAAA,QACX,iBAAe;AAAA,QACd,GAAG;AAAA,QAEJ,OAAO;AAAA,QACP,eAAW,kBAAAC,SAAW,eAAe,gBAAgB,IAAI,IAAI,MAAM,SAAS;AAAA,QAE3E;AAAA;AAAA,IACF;AAGD,UAAM,iBAAiB,WAAW,MAAM;AAExC,WAAO,4CAAC,0CAAgB,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,gBAAAD,QAAS;AAAA,IAAT;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAIJ,MAAK;AAAA,MACL,eAAW,kBAAAC,SAAW,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,gBAAAD,QAAS;AAAA,IAAT;AAAA,MACC,GAAG;AAAA,MAEJ,OAAO;AAAA,MACP,eAAW,kBAAAC;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,4CAAC,0CAAgB,SAAS,gBAAiB,sBAAW;AAC9D;",
   "names": ["React", "_Toolbar", "classnames"]
 }

package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js

@@ -0,0 +1,266 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var TldrawUiTooltip_exports = {};
+__export(TldrawUiTooltip_exports, {
+  TldrawUiTooltip: () => TldrawUiTooltip,
+  TldrawUiTooltipProvider: () => TldrawUiTooltipProvider,
+  tooltipManager: () => tooltipManager
+});
+module.exports = __toCommonJS(TldrawUiTooltip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_editor = require("@tldraw/editor");
+var import_radix_ui = require("radix-ui");
+var import_react = __toESM(require("react"));
+var import_layout = require("./layout");
+const DEFAULT_TOOLTIP_DELAY_MS = 700;
+class TooltipManager {
+  static instance = null;
+  currentTooltip = (0, import_editor.atom)("current tooltip", null);
+  destroyTimeoutId = null;
+  static getInstance() {
+    if (!TooltipManager.instance) {
+      TooltipManager.instance = new TooltipManager();
+    }
+    return TooltipManager.instance;
+  }
+  showTooltip(tooltipId, content, targetElement, side, sideOffset, showOnMobile, delayDuration) {
+    if (this.destroyTimeoutId) {
+      clearTimeout(this.destroyTimeoutId);
+      this.destroyTimeoutId = null;
+    }
+    this.currentTooltip.set({
+      id: tooltipId,
+      content,
+      side,
+      sideOffset,
+      showOnMobile,
+      targetElement,
+      delayDuration
+    });
+  }
+  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() {
+    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 = (0, import_editor.atom)("has hover", mediaQuery.matches);
+      this.supportsHoverAtom = supportsHover;
+      mediaQuery.addEventListener("change", (e) => {
+        supportsHover.set(e.matches);
+      });
+    }
+    return this.supportsHoverAtom.get();
+  }
+}
+const tooltipManager = TooltipManager.getInstance();
+const TooltipSingletonContext = (0, import_react.createContext)(false);
+function TldrawUiTooltipProvider({ children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Tooltip.Provider, { skipDelayDuration: 700, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(TooltipSingletonContext.Provider, { value: true, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipSingleton, {})
+  ] }) });
+}
+function TooltipSingleton() {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const triggerRef = (0, import_react.useRef)(null);
+  const isFirstShowRef = (0, import_react.useRef)(true);
+  const currentTooltip = (0, import_editor.useValue)(
+    "current tooltip",
+    () => tooltipManager.getCurrentTooltipData(),
+    []
+  );
+  (0, import_react.useEffect)(() => {
+    let timer = null;
+    if (currentTooltip && triggerRef.current) {
+      const activeRect = currentTooltip.targetElement.getBoundingClientRect();
+      const trigger = triggerRef.current;
+      trigger.style.position = "fixed";
+      trigger.style.left = `${activeRect.left}px`;
+      trigger.style.top = `${activeRect.top}px`;
+      trigger.style.width = `${activeRect.width}px`;
+      trigger.style.height = `${activeRect.height}px`;
+      trigger.style.pointerEvents = "none";
+      trigger.style.zIndex = "9999";
+      if (isFirstShowRef.current) {
+        timer = setTimeout(() => {
+          setIsOpen(true);
+          isFirstShowRef.current = false;
+        }, currentTooltip.delayDuration);
+      } else {
+        setIsOpen(true);
+      }
+    } else {
+      setIsOpen(false);
+      isFirstShowRef.current = true;
+    }
+    return () => {
+      if (timer !== null) {
+        clearTimeout(timer);
+      }
+    };
+  }, [currentTooltip]);
+  if (!currentTooltip) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_radix_ui.Tooltip.Root, { open: isOpen, delayDuration: 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Tooltip.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref: triggerRef }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_radix_ui.Tooltip.Content,
+      {
+        className: "tlui-tooltip",
+        side: currentTooltip.side,
+        sideOffset: currentTooltip.sideOffset,
+        avoidCollisions: true,
+        collisionPadding: 8,
+        dir: "ltr",
+        children: [
+          currentTooltip.content,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Tooltip.Arrow, { className: "tlui-tooltip__arrow" })
+        ]
+      }
+    )
+  ] });
+}
+const TldrawUiTooltip = (0, import_react.forwardRef)(
+  ({
+    children,
+    content,
+    side,
+    sideOffset = 5,
+    disabled = false,
+    showOnMobile = false,
+    delayDuration
+  }, ref) => {
+    const editor = (0, import_editor.useMaybeEditor)();
+    const tooltipId = (0, import_react.useRef)((0, import_editor.uniqueId)());
+    const hasProvider = (0, import_react.useContext)(TooltipSingletonContext);
+    const orientationCtx = (0, import_layout.useTldrawUiOrientation)();
+    const sideToUse = side ?? orientationCtx.tooltipSide;
+    const camera = (0, import_editor.useValue)("camera", () => editor?.getCamera(), []);
+    (0, import_react.useEffect)(() => {
+      const currentTooltipId = tooltipId.current;
+      return () => {
+        if (hasProvider) {
+          tooltipManager.hideTooltip(editor, currentTooltipId, true);
+        }
+      };
+    }, [editor, hasProvider]);
+    (0, import_react.useEffect)(() => {
+      tooltipManager.hideTooltip(editor, tooltipId.current, true);
+    }, [editor, camera]);
+    if (disabled || !content) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children });
+    }
+    const delayDurationToUse = delayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS);
+    if (!hasProvider) {
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_radix_ui.Tooltip.Root, { delayDuration: delayDurationToUse, disableHoverableContent: true, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Tooltip.Trigger, { asChild: true, ref, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          import_radix_ui.Tooltip.Content,
+          {
+            className: "tlui-tooltip",
+            side: sideToUse,
+            sideOffset,
+            avoidCollisions: true,
+            collisionPadding: 8,
+            dir: "ltr",
+            children: [
+              content,
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Tooltip.Arrow, { className: "tlui-tooltip__arrow" })
+            ]
+          }
+        )
+      ] });
+    }
+    const child = import_react.default.Children.only(children);
+    (0, import_editor.assert)(import_react.default.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 = import_react.default.cloneElement(children, {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus,
+      onBlur: handleBlur
+    });
+    return childrenWithHandlers;
+  }
+);
+//# sourceMappingURL=TldrawUiTooltip.js.map

package/dist-cjs/lib/ui/components/primitives/TldrawUiTooltip.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../src/lib/ui/components/primitives/TldrawUiTooltip.tsx"],
+  "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\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\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 [isOpen, setIsOpen] = useState(false)\n\tconst triggerRef = useRef<HTMLDivElement>(null)\n\tconst isFirstShowRef = useRef(true)\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\tlet timer: ReturnType<typeof setTimeout> | null = null\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) {\n\t\t\t\t// eslint-disable-next-line no-restricted-globals\n\t\t\t\ttimer = setTimeout(() => {\n\t\t\t\t\tsetIsOpen(true)\n\t\t\t\t\tisFirstShowRef.current = false\n\t\t\t\t}, currentTooltip.delayDuration)\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\n\t\treturn () => {\n\t\t\tif (timer !== null) {\n\t\t\t\tclearTimeout(timer)\n\t\t\t}\n\t\t}\n\t}, [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\tconst camera = useValue('camera', () => editor?.getCamera(), [])\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\tuseEffect(() => {\n\t\t\ttooltipManager.hideTooltip(editor, tooltipId.current, true)\n\t\t}, [editor, camera])\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\tconst delayDurationToUse =\n\t\t\tdelayDuration ?? (editor?.options.tooltipDelayMs || DEFAULT_TOOLTIP_DELAY_MS)\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 delayDuration={delayDurationToUse} disableHoverableContent>\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\tdelayDurationToUse\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\tdelayDurationToUse\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": ["_Tooltip", "React"]
+}