@syscore/ui-library 1.1.12 → 1.2.0

package/client/components/ui/tooltip.tsx

@@ -5,6 +5,21 @@ import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 
 import { cn } from "@/lib/utils";
 
+type TriggerMode = "hover" | "click";
+
+// Context for passing trigger mode and close function to children
+const TooltipContext = React.createContext<{
+  trigger: TriggerMode;
+  toggle: () => void;
+  close: () => void;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
+}>({
+  trigger: "hover",
+  toggle: () => {},
+  close: () => {},
+  triggerRef: { current: null },
+});
+
 function TooltipProvider({
   delayDuration = 0,
   ...props
@@ -18,20 +33,114 @@ function TooltipProvider({
   );
 }
 
+interface TooltipProps
+  extends Omit<
+    React.ComponentProps<typeof TooltipPrimitive.Root>,
+    "open" | "onOpenChange"
+  > {
+  /**
+   * Trigger mode: "hover" (default) or "click"
+   * - hover: Opens on mouse hover, closes on hover off (default tooltip behavior)
+   * - click: Opens on click, closes on trigger click or click outside
+   */
+  trigger?: TriggerMode;
+  /** Controlled open state (optional) */
+  open?: boolean;
+  /** Callback when open state changes (optional) */
+  onOpenChange?: (open: boolean) => void;
+}
+
 function Tooltip({
+  trigger = "hover",
+  open: controlledOpen,
+  onOpenChange,
+  children,
   ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+}: TooltipProps) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(false);
+  const triggerRef = React.useRef<HTMLButtonElement>(null);
+
+  // Use controlled or uncontrolled state
+  const isControlled = controlledOpen !== undefined;
+  const isOpen = isControlled ? controlledOpen : uncontrolledOpen;
+
+  const handleOpenChange = React.useCallback(
+    (newOpen: boolean) => {
+      // For click mode, ignore hover-triggered changes
+      if (trigger === "click") return;
+
+      if (!isControlled) {
+        setUncontrolledOpen(newOpen);
+      }
+      onOpenChange?.(newOpen);
+    },
+    [isControlled, onOpenChange, trigger],
+  );
+
+  const close = React.useCallback(() => {
+    if (!isControlled) {
+      setUncontrolledOpen(false);
+    }
+    onOpenChange?.(false);
+  }, [isControlled, onOpenChange]);
+
+  const toggle = React.useCallback(() => {
+    const newOpen = !isOpen;
+    if (!isControlled) {
+      setUncontrolledOpen(newOpen);
+    }
+    onOpenChange?.(newOpen);
+  }, [isOpen, isControlled, onOpenChange]);
+
+  // For click mode, we fully control open state
+  const tooltipProps =
+    trigger === "click"
+      ? {
+          open: isOpen,
+          onOpenChange: handleOpenChange,
+        }
+      : {
+          open: isControlled ? controlledOpen : undefined,
+          onOpenChange,
+        };
+
   return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
+    <TooltipContext.Provider value={{ trigger, toggle, close, triggerRef }}>
+      <TooltipProvider delayDuration={trigger === "click" ? 100000 : 0}>
+        <TooltipPrimitive.Root data-slot="tooltip" {...tooltipProps} {...props}>
+          {children}
+        </TooltipPrimitive.Root>
+      </TooltipProvider>
+    </TooltipContext.Provider>
   );
 }
 
 function TooltipTrigger({
+  onClick,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+  const { trigger, toggle, triggerRef } = React.useContext(TooltipContext);
+
+  const handleClick = React.useCallback(
+    (e: React.MouseEvent<HTMLButtonElement>) => {
+      if (trigger === "click") {
+        e.preventDefault();
+        e.stopPropagation();
+        toggle();
+      }
+      onClick?.(e);
+    },
+    [trigger, toggle, onClick],
+  );
+
+  return (
+    <TooltipPrimitive.Trigger
+      ref={triggerRef}
+      data-slot="tooltip-trigger"
+      onClick={handleClick}
+      {...props}
+    />
+  );
 }
 
 function TooltipContent({
@@ -42,21 +151,49 @@ function TooltipContent({
   alignOffset = 0,
   ...props
 }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  const { trigger, close, triggerRef } = React.useContext(TooltipContext);
+  const contentRef = React.useRef<HTMLDivElement>(null);
+
+  // Click outside detection for click mode
+  React.useEffect(() => {
+    if (trigger !== "click") return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      const target = event.target as Node;
+      const isOutsideContent =
+        contentRef.current && !contentRef.current.contains(target);
+      const isOutsideTrigger =
+        triggerRef.current && !triggerRef.current.contains(target);
+
+      if (isOutsideContent && isOutsideTrigger) {
+        close();
+      }
+    };
+
+    // Small delay to avoid closing immediately on the same click that opened it
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("click", handleClickOutside);
+    }, 0);
+
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("click", handleClickOutside);
+    };
+  }, [trigger, close, triggerRef]);
+
   return (
     <TooltipPrimitive.Portal>
       <TooltipPrimitive.Content
+        ref={contentRef}
         data-slot="tooltip-content"
         sideOffset={sideOffset}
         alignOffset={alignOffset}
         side={side}
-        className={cn(
-          "group relative bg-gray-700 animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out 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 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-lg px-6 pt-8 pb-6  text-balance shadow-sm",
-          className,
-        )}
+        className={cn("tooltip-content", className)}
         {...props}
       >
         {/* Marker/Arrow */}
-        <div className="absolute  left-1/2 -translate-x-1/2 flex justify-center group-data-[side=top]:bottom-0 group-data-[side=top]:rotate-180 group-data-[side=bottom]:top-0 group-data-[side=left]:right-0 group-data-[side=right]:left-0">
+        <div className="tooltip-arrow" data-side={side}>
           <svg
             xmlns="http://www.w3.org/2000/svg"
             width="10"