@lets-events/react 12.11.0 → 12.11.2

package/src/components/Modal.tsx

@@ -2,8 +2,8 @@ import { ComponentProps } from "react";
 import { styled } from "../styles";
 import { Dialog as ModalRadix } from "radix-ui";
 import Icon from "./Icon";
-import { Box } from "./Box";
 import { Text } from "./Text";
+import { typographyValues } from "../types/typographyValues";
 
 const ModalContentStyled = styled(ModalRadix.Content, {
   fontFamily: "$default",
@@ -58,8 +58,11 @@ const ModalTitleStyled = styled(ModalRadix.Title, {
   fontWeight: "medium",
   fontStyle: "normal",
   textTransform: "uppercase",
+  width: "calc(100% - 48px)",
 });
 
+type Typography = keyof typeof typographyValues;
+
 export type ModalProps = ComponentProps<typeof ModalRadix.Root> & {
   trigger?: React.ReactNode;
   title?: string;
@@ -70,6 +73,7 @@ export type ModalProps = ComponentProps<typeof ModalRadix.Root> & {
   height?: string;
   preventAutoFocus?: boolean;
   fitContent?: boolean;
+  titleTypography?: Typography;
 };
 
 export function Modal({
@@ -82,6 +86,7 @@ export function Modal({
   height,
   preventAutoFocus = false,
   fitContent = false,
+  titleTypography = "headline6",
   ...props
 }: ModalProps) {
   const { onOpenChange } = props;
@@ -110,7 +115,7 @@ export function Modal({
             {title && (
               <ModalHeaderStyled>
                 <ModalTitleStyled asChild>
-                  <Text typography={"headline6"} fontWeight={"medium"}>
+                  <Text typography={titleTypography} fontWeight={"medium"}>
                     {title}
                   </Text>
                 </ModalTitleStyled>

package/src/components/MultiSelect/index.tsx

@@ -321,6 +321,7 @@ export const MultiSelect = React.forwardRef<HTMLDivElement, MultiSelectProps>(
             maxHeight={MOBILE_MODAL_MAX_HEIGHT}
             zIndex={modalZIndex}
             preventAutoFocus
+            titleTypography="headline8"
             fitContent
           >
             <StyledModalOptionsWrapper

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;
+}