From a74a1cc5241e2ccf1e6b1021a3831da9875d2522 Mon Sep 17 00:00:00 2001
From: nikogoli <k_m_naoto@yahoo.co.jp>
Date: Thu, 2 Nov 2023 11:44:46 +0900
Subject: [PATCH] =?UTF-8?q?Change=EF=BC=9ATooltip=20=E5=AF=BE=E5=BF=9C=20(?=
 =?UTF-8?q?=E5=88=A9=E7=94=A8=E4=B8=8D=E5=8F=AF)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

hover 状態でも tooltip の表示が永続化されず、表示後即座に消えてしまう ([issue](https://github.com/preactjs/preact/issues/3805))
---
 _examples/Tooltip.tsx       | 10 +++++-----
 components/ui/tooltip.tsx   | 12 +++++++-----
 deno.json                   |  1 +
 islands/App.tsx             |  4 ++--
 lib/components/tooltip.d.ts | 33 +++++++++++++++++++++++++++++++++
 5 files changed, 48 insertions(+), 12 deletions(-)
 create mode 100644 lib/components/tooltip.d.ts

diff --git a/_examples/Tooltip.tsx b/_examples/Tooltip.tsx
index d852910..98a0a33 100644
--- a/_examples/Tooltip.tsx
+++ b/_examples/Tooltip.tsx
@@ -1,14 +1,14 @@
-import { Button } from '@/components/ui/button'
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
+import { Button } from '../components/ui/button.tsx'
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '../components/ui/tooltip.tsx'
 
 export function TooltipDemo() {
   return (
     <TooltipProvider>
       <Tooltip>
         <TooltipTrigger asChild>
-          <Button variant="outline" className="w-10 rounded-full p-0">
-            <span className="i-lucide:plus flex h-4 w-4" />
-            <span className="sr-only">Add</span>
+          <Button variant="outline" class="w-10 rounded-full p-0">
+            <span class="i-lucide:plus flex h-4 w-4" />
+            <span class="sr-only">Add</span>
           </Button>
         </TooltipTrigger>
         <TooltipContent>
diff --git a/components/ui/tooltip.tsx b/components/ui/tooltip.tsx
index 2054a36..fb2573b 100644
--- a/components/ui/tooltip.tsx
+++ b/components/ui/tooltip.tsx
@@ -1,9 +1,11 @@
 'use client'
 
-import * as React from 'react'
+import * as React from 'preact/compat'
 import * as TooltipPrimitive from '@radix-ui/react-tooltip'
+import * as AlitTooltipPrimitive from "../../lib/components/tooltip.d.ts"
 
-import { cn } from '../../lib/utils'
+import { cn } from '../../lib/utils.ts'
+import { ElementRef, ComponentPropsWithoutRef } from "../../lib/type-utils.ts"
 
 const TooltipProvider = TooltipPrimitive.Provider
 
@@ -12,9 +14,9 @@ const Tooltip = TooltipPrimitive.Root
 const TooltipTrigger = TooltipPrimitive.Trigger
 
 const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
+  ElementRef<typeof AlitTooltipPrimitive.Content>,
+  ComponentPropsWithoutRef<typeof AlitTooltipPrimitive.Content>
+>(({ class:className, sideOffset = 4, ...props }, ref) => (
   <TooltipPrimitive.Content
     ref={ref}
     sideOffset={sideOffset}
diff --git a/deno.json b/deno.json
index aeda1d7..211e517 100644
--- a/deno.json
+++ b/deno.json
@@ -83,6 +83,7 @@
     "@radix-ui/react-switch": "https://esm.sh/*@radix-ui/react-switch@1.0.3?alias=react:preact/compat,@types/react:preact/compat",
     "@radix-ui/react-tabs": "https://esm.sh/*@radix-ui/react-tabs@1.0.4?alias=react:preact/compat,@types/react:preact/compat",
     "@radix-ui/react-toast": "https://esm.sh/*@radix-ui/react-toast@1.1.5?alias=react:preact/compat,react-dom:preact/compat,@types/react:preact/compat",
+    "@radix-ui/react-tooltip": "https://esm.sh/*@radix-ui/react-tooltip@1.0.7?alias=react:preact/compat,@types/react:preact/compat",
 
     "aria-hidden": "https://esm.sh/aria-hidden@1.2.3",
     "detect-node-es": "https://esm.sh/detect-node-es@1.1.0?target=es2022",
diff --git a/islands/App.tsx b/islands/App.tsx
index 1213981..7a5f44a 100644
--- a/islands/App.tsx
+++ b/islands/App.tsx
@@ -29,7 +29,7 @@ import { TabsDemo } from '../_examples/Tabs.tsx'
 import { TextareaDemo } from '../_examples/Textarea.tsx'
 import { ToastDemo } from '../_examples/Toast.tsx'
 import { ToggleDemo } from '../_examples/Toggle.tsx'
-//import { TooltipDemo } from './examples/Tooltip'
+import { TooltipDemo } from '../_examples/Tooltip.tsx'
 import { NavigationMenuDemo } from '../_examples/NavigationMenu.tsx'
 
 function App() {
@@ -109,7 +109,7 @@ function App() {
 
       <ToggleDemo />
 
-      {/*<TooltipDemo />*/}
+      <TooltipDemo />
 
       <SkeletonDemo />
     </div>
diff --git a/lib/components/tooltip.d.ts b/lib/components/tooltip.d.ts
new file mode 100644
index 0000000..1b640d0
--- /dev/null
+++ b/lib/components/tooltip.d.ts
@@ -0,0 +1,33 @@
+import * as React from "preact/compat"
+import { DismissableLayerProps } from "../type-utils-DismissableLayer.d.ts";
+import { PopperContentProps } from "../type-utils-PopperPrimitive.d.ts"; 
+
+/**
+ * Following type-definitions are based on "https://esm.sh/v133/@radix-ui/react-tooltip@1.0.7/X-YS9AdHlwZXMvcmVhY3Q6cHJlYWN0L2NvbXBhdCxyZWFjdDpwcmVhY3QvY29tcGF0CmUvKg/dist/index.d.mts"
+ */ 
+
+
+interface TooltipContentImplProps extends Omit<PopperContentProps, 'onPlaced'> {
+  /**
+   * A more descriptive label for accessibility purpose
+   */
+  'aria-label'?: string;
+  /**
+   * Event handler called when the escape key is down.
+   * Can be prevented.
+   */
+  onEscapeKeyDown?: DismissableLayerProps['onEscapeKeyDown'];
+  /**
+   * Event handler called when the a `pointerdown` event happens outside of the `Tooltip`.
+   * Can be prevented.
+   */
+  onPointerDownOutside?: DismissableLayerProps['onPointerDownOutside'];
+}
+interface TooltipContentProps extends TooltipContentImplProps {
+  /**
+   * Used to force mounting when more control is needed. Useful when
+   * controlling animation with React animation libraries.
+   */
+  forceMount?: true;
+}
+export const Content: React.ForwardRefExoticComponent<TooltipContentProps & React.RefAttributes<HTMLDivElement>>;
\ No newline at end of file