fix: disableAnimation prop on tooltip

risc0 · Apr 8, 2024 · 7a7423e · 7a7423e
1 parent 7c075cd
commit 7a7423e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 5 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@risc0/ui",
-  "version": "0.0.44",
+  "version": "0.0.45",
   "sideEffects": false,
   "type": "module",
   "scripts": {

diff --git a/tooltip.tsx b/tooltip.tsx
@@ -6,23 +6,35 @@ import { cn } from "./cn";
 
 const TooltipContent = forwardRef<
   ElementRef<typeof TooltipPrimitive.Content>,
-  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...rest }, ref) => (
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
+    // any other prop goes here
+    disableAnimation?: boolean;
+  }
+>(({ className, sideOffset = 4, disableAnimation = false, ...rest }, ref) => (
   <TooltipPrimitive.Content
     ref={ref}
     sideOffset={sideOffset}
     className={cn(
-      "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 animate-in overflow-hidden rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-xs data-[state=closed]:animate-out dark:bg-white",
+      "overflow-hidden rounded-md bg-primary px-3 py-1.5 text-primary-foreground text-xs dark:bg-white",
+      !disableAnimation &&
+        "fade-in-0 zoom-in-95 data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 animate-in data-[state=closed]:animate-out",
       className,
     )}
     {...rest}
   />
 ));
 
+const TooltipArrow = forwardRef<
+  ElementRef<typeof TooltipPrimitive.Arrow>,
+  ComponentPropsWithoutRef<typeof TooltipPrimitive.Arrow>
+>(({ className, ...rest }, ref) => (
+  <TooltipPrimitive.Arrow ref={ref} className={cn("dark:fill-white", className)} {...rest} />
+));
+
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+TooltipArrow.displayName = TooltipPrimitive.Arrow.displayName;
 
 const TooltipProvider = TooltipPrimitive.Provider;
-const TooltipArrow = TooltipPrimitive.Arrow;
 const Tooltip = TooltipPrimitive.Root;
 const TooltipTrigger = TooltipPrimitive.Trigger;