@lets-events/react 12.11.0 → 12.11.1

package/src/components/Tooltip/index.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { styled } from "../../styles";
 import { Text } from "../Text";
+import { useHasHover } from "../../hooks/useHasHover";
 
 const TooltipProvider = TooltipPrimitive.Provider;
 const TooltipRoot = TooltipPrimitive.Root;
@@ -43,6 +44,21 @@ export interface TooltipProps {
   content: React.ReactNode;
   delayDuration?: number;
   side?: "top" | "right" | "bottom" | "left";
+  supportMobileTap?: boolean;
+}
+
+function mergeTouchTriggerProps(
+  child: React.ReactElement<{ onClick?: (event: React.MouseEvent) => void }>,
+  onToggle: () => void
+): React.ReactElement {
+  return React.cloneElement(child, {
+    onClick: (event: React.MouseEvent) => {
+      child.props.onClick?.(event);
+      if (!event.defaultPrevented) {
+        onToggle();
+      }
+    },
+  });
 }
 
 export function Tooltip({
@@ -50,19 +66,56 @@ export function Tooltip({
   content,
   delayDuration = 200,
   side = "top",
+  supportMobileTap = true,
 }: TooltipProps) {
+  const hasHover = useHasHover();
+  const [open, setOpen] = React.useState(false);
+  const isTouchToggleRef = React.useRef(false);
+  const useTouchBehavior = supportMobileTap && !hasHover;
+
+  const handleTouchOpenChange = React.useCallback((nextOpen: boolean) => {
+    if (isTouchToggleRef.current) {
+      isTouchToggleRef.current = false;
+      return;
+    }
+
+    setOpen(nextOpen);
+  }, []);
+
+  const triggerChild = React.useMemo(() => {
+    if (!useTouchBehavior || !React.isValidElement(children)) {
+      return children;
+    }
+
+    return mergeTouchTriggerProps(
+      children as React.ReactElement<{ onClick?: (event: React.MouseEvent) => void }>,
+      () => {
+        isTouchToggleRef.current = true;
+        setOpen((prev) => !prev);
+      }
+    );
+  }, [children, useTouchBehavior]);
+
+  const tooltipContent =
+    typeof content === "string" ? (
+      <Text typography={"tooltip"} color="grey50">
+        {content}
+      </Text>
+    ) : (
+      content
+    );
+
   return (
     <TooltipProvider>
-      <TooltipRoot delayDuration={delayDuration}>
-        <TooltipTrigger asChild>{children}</TooltipTrigger>
+      <TooltipRoot
+        delayDuration={useTouchBehavior ? 0 : delayDuration}
+        {...(useTouchBehavior
+          ? { open, onOpenChange: handleTouchOpenChange }
+          : {})}
+      >
+        <TooltipTrigger asChild>{triggerChild}</TooltipTrigger>
         <TooltipContent side={side} sideOffset={5}>
-          {typeof content === "string" ? (
-            <Text typography={"tooltip"} color="grey50">
-              {content}
-            </Text>
-          ) : (
-            content
-          )}
+          {tooltipContent}
           <TooltipArrow />
         </TooltipContent>
       </TooltipRoot>

package/src/hooks/useHasHover.ts

@@ -0,0 +1,21 @@
+import { useEffect, useState } from "react";
+
+export function useHasHover(): boolean {
+  const [hasHover, setHasHover] = useState(true);
+
+  useEffect(() => {
+    const media = window.matchMedia("(hover: hover)");
+
+    setHasHover(media.matches);
+
+    const listener = (event: MediaQueryListEvent) => {
+      setHasHover(event.matches);
+    };
+
+    media.addEventListener("change", listener);
+
+    return () => media.removeEventListener("change", listener);
+  }, []);
+
+  return hasHover;
+}