replace radix with LSUI tooltip

packages/tldraw/apps/tldraw-logseq/package.json

@@ -19,7 +19,6 @@
     "@radix-ui/react-switch": "^1.0.1",
     "@radix-ui/react-toggle": "^1.0.1",
     "@radix-ui/react-toggle-group": "^1.0.1",
-    "@radix-ui/react-tooltip": "^1.0.2",
     "@tldraw/core": "2.0.0-alpha.1",
     "@tldraw/react": "2.0.0-alpha.1",
     "@tldraw/vec": "2.0.0-alpha.1",

packages/tldraw/apps/tldraw-logseq/src/components/Tooltip/Tooltip.tsx

@@ -1,30 +1,21 @@
-import * as ReactTooltip from '@radix-ui/react-tooltip'
-import type { Side } from '@radix-ui/react-popper'
-export interface TooltipProps extends ReactTooltip.TooltipContentProps {
-  children: React.ReactNode
-  side?: Side
-  sideOffset?: number
-  content?: React.ReactNode
-}
+// @ts-ignore
+const LSUI = window.LSUI
 
-export function Tooltip({ side, content, sideOffset = 10, ...rest }: TooltipProps) {
+export function Tooltip({ side, content, sideOffset = 10, ...rest }) {
   return content ? (
-    <ReactTooltip.Provider delayDuration={300}>
-      <ReactTooltip.Root>
-        <ReactTooltip.Trigger asChild>{rest.children}</ReactTooltip.Trigger>
-        <ReactTooltip.Portal>
-          <ReactTooltip.Content
-            className="tl-tooltip-content"
+    <LSUI.TooltipProvider delayDuration={300}>
+      <LSUI.Tooltip>
+        <LSUI.TooltipTrigger asChild>{rest.children}</LSUI.TooltipTrigger>
+          <LSUI.TooltipContent
             sideOffset={sideOffset}
             side={side}
             {...rest}
           >
             {content}
-            <ReactTooltip.Arrow className="tl-tooltip-arrow" />
-          </ReactTooltip.Content>
-        </ReactTooltip.Portal>
-      </ReactTooltip.Root>
-    </ReactTooltip.Provider>
+            <LSUI.TooltipArrow className="tl-tooltip-arrow" />
+          </LSUI.TooltipContent>
+      </LSUI.Tooltip>
+    </LSUI.TooltipProvider>
   ) : (
     <>{rest.children}</>
   )

packages/tldraw/apps/tldraw-logseq/src/styles.css

@@ -1155,24 +1155,6 @@ button.tl-shape-links-panel-item-remove-button {
   @apply block;
 }
 
-.tl-tooltip-content {
-  border-radius: 4px;
-  padding: 10px 15px;
-  font-size: 15px;
-  line-height: 1;
-  color: or(--ls-whiteboard-tooltip-text, --lx-gray-12, --ls-secondary-text-color);
-  background-color: or(--ls-whiteboard-tooltip-background, --lx-gray-05, --ls-secondary-background-color);
-  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
-  user-select: none;
-  animation-duration: 700ms;
-  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  will-change: transform, opacity;
-
-  &[data-state='delayed-open'] {
-    animation-name: fadeIn;
-  }
-}
-
 .tl-tooltip-arrow {
   fill: var(--ls-secondary-background-color);
 }

packages/tldraw/yarn.lock

@@ -1000,25 +1000,6 @@
     "@radix-ui/react-primitive" "1.0.1"
     "@radix-ui/react-use-controllable-state" "1.0.0"
 
-"@radix-ui/react-tooltip@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.0.2.tgz#8e10b075767f785bf013146fdc954ac6885efda3"
-  integrity sha512-11gUlok2rv5mu+KBtxniOKKNKjqC/uTbgFHWoQdbF46vMV+zjDaBvCtVDK9+MTddlpmlisGPGvvojX7Qm0yr+g==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/primitive" "1.0.0"
-    "@radix-ui/react-compose-refs" "1.0.0"
-    "@radix-ui/react-context" "1.0.0"
-    "@radix-ui/react-dismissable-layer" "1.0.2"
-    "@radix-ui/react-id" "1.0.0"
-    "@radix-ui/react-popper" "1.0.1"
-    "@radix-ui/react-portal" "1.0.1"
-    "@radix-ui/react-presence" "1.0.0"
-    "@radix-ui/react-primitive" "1.0.1"
-    "@radix-ui/react-slot" "1.0.1"
-    "@radix-ui/react-use-controllable-state" "1.0.0"
-    "@radix-ui/react-visually-hidden" "1.0.1"
-
 "@radix-ui/[email protected]":
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.0.tgz#9e7b8b6b4946fe3cbe8f748c82a2cce54e7b6a90"
@@ -1072,14 +1053,6 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.0"
 
-"@radix-ui/[email protected]":
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.1.tgz#9a4ac4fc97ae8d72a10e727f16b3121b5f0aa469"
-  integrity sha512-K1hJcCMfWfiYUibRqf3V8r5Drpyf7rh44jnrwAbdvI5iCCijilBBeyQv9SKidYNZIopMdCyR9FnIjkHxHN0FcQ==
-  dependencies:
-    "@babel/runtime" "^7.13.10"
-    "@radix-ui/react-primitive" "1.0.1"
-
 "@radix-ui/[email protected]":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.2.tgz#29b117a59ef09a984bdad12cb98d81e8350be450"