@lets-events/react 12.10.17 → 12.11.1

package/src/components/ToggleElement/index.tsx

@@ -1,58 +1,58 @@
-import { ReactNode, useState } from "react";
-import { Button, ButtonProps } from "../Button";
-import { Icon } from "../Icon";
-
-export interface ToggleElementProps {
-  children: ReactNode;
-  label: ReactNode;
-  openedLabel?: ReactNode;
-  defaultOpen?: boolean;
-  open?: boolean;
-  hideButtonWhenOpen?: boolean;
-  buttonProps?: Omit<ButtonProps, "children" | "onClick">;
-  onOpenChange?: (open: boolean) => void;
-}
-
-export function ToggleElement({
-  children,
-  label,
-  openedLabel,
-  defaultOpen = false,
-  open,
-  hideButtonWhenOpen = true,
-  buttonProps,
-  onOpenChange,
-}: ToggleElementProps) {
-  const [internalOpen, setInternalOpen] = useState(defaultOpen);
-  const isControlled = open !== undefined;
-  const isOpen = isControlled ? open : internalOpen;
-
-  const handleClick = () => {
-    const nextOpen = !isOpen;
-
-    if (!isControlled) {
-      setInternalOpen(nextOpen);
-    }
-
-    onOpenChange?.(nextOpen);
-  };
-
-  return (
-    <>
-      {(!isOpen || !hideButtonWhenOpen) && (
-        <Button
-          type="button"
-          variant="toggle"
-          color="brand"
-          size="small"
-          {...buttonProps}
-          onClick={handleClick}
-        >
-          {!isOpen && <Icon name="plus" size="md" />}
-          {isOpen ? openedLabel ?? label : label}
-        </Button>
-      )}
-      {isOpen && children}
-    </>
-  );
-}
+import { ReactNode, useState } from "react";
+import { Button, ButtonProps } from "../Button";
+import { Icon } from "../Icon";
+
+export interface ToggleElementProps {
+  children: ReactNode;
+  label: ReactNode;
+  openedLabel?: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  hideButtonWhenOpen?: boolean;
+  buttonProps?: Omit<ButtonProps, "children" | "onClick">;
+  onOpenChange?: (open: boolean) => void;
+}
+
+export function ToggleElement({
+  children,
+  label,
+  openedLabel,
+  defaultOpen = false,
+  open,
+  hideButtonWhenOpen = true,
+  buttonProps,
+  onOpenChange,
+}: ToggleElementProps) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const isControlled = open !== undefined;
+  const isOpen = isControlled ? open : internalOpen;
+
+  const handleClick = () => {
+    const nextOpen = !isOpen;
+
+    if (!isControlled) {
+      setInternalOpen(nextOpen);
+    }
+
+    onOpenChange?.(nextOpen);
+  };
+
+  return (
+    <>
+      {(!isOpen || !hideButtonWhenOpen) && (
+        <Button
+          type="button"
+          variant="toggle"
+          color="brand"
+          size="small"
+          {...buttonProps}
+          onClick={handleClick}
+        >
+          {!isOpen && <Icon name="plus" size="md" />}
+          {isOpen ? openedLabel ?? label : label}
+        </Button>
+      )}
+      {isOpen && children}
+    </>
+  );
+}

package/src/components/Tooltip/index.tsx

@@ -1,73 +1,126 @@
-import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { styled } from "../../styles";
-import { Text } from "../Text";
-
-const TooltipProvider = TooltipPrimitive.Provider;
-const TooltipRoot = TooltipPrimitive.Root;
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = styled(TooltipPrimitive.Content, {
-  backgroundColor: "$dark800",
-  color: "$neutral50",
-  borderRadius: "4px",
-  padding: "10px 15px",
-  fontSize: "14px",
-  lineHeight: 1,
-  zIndex: 100,
-  boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
-  userSelect: "none",
-  animationDuration: "400ms",
-  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
-  willChange: "transform, opacity",
-  '&[data-state="delayed-open"][data-side="top"]': {
-    animationName: "slideDownAndFade",
-  },
-  '&[data-state="delayed-open"][data-side="right"]': {
-    animationName: "slideLeftAndFade",
-  },
-  '&[data-state="delayed-open"][data-side="bottom"]': {
-    animationName: "slideUpAndFade",
-  },
-  '&[data-state="delayed-open"][data-side="left"]': {
-    animationName: "slideRightAndFade",
-  },
-});
-
-const TooltipArrow = styled(TooltipPrimitive.Arrow, {
-  fill: "$dark800",
-});
-
-export interface TooltipProps {
-  children: React.ReactNode;
-  content: React.ReactNode;
-  delayDuration?: number;
-  side?: "top" | "right" | "bottom" | "left";
-}
-
-export function Tooltip({
-  children,
-  content,
-  delayDuration = 200,
-  side = "top",
-}: TooltipProps) {
-  return (
-    <TooltipProvider>
-      <TooltipRoot delayDuration={delayDuration}>
-        <TooltipTrigger asChild>{children}</TooltipTrigger>
-        <TooltipContent side={side} sideOffset={5}>
-          {typeof content === "string" ? (
-            <Text typography={"tooltip"} color="grey50">
-              {content}
-            </Text>
-          ) : (
-            content
-          )}
-          <TooltipArrow />
-        </TooltipContent>
-      </TooltipRoot>
-    </TooltipProvider>
-  );
-}
-
-export { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent };
+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;
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+const TooltipContent = styled(TooltipPrimitive.Content, {
+  backgroundColor: "$dark800",
+  color: "$neutral50",
+  borderRadius: "4px",
+  padding: "10px 15px",
+  fontSize: "14px",
+  lineHeight: 1,
+  zIndex: 100,
+  boxShadow: "0 2px 10px rgba(0, 0, 0, 0.1)",
+  userSelect: "none",
+  animationDuration: "400ms",
+  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+  willChange: "transform, opacity",
+  '&[data-state="delayed-open"][data-side="top"]': {
+    animationName: "slideDownAndFade",
+  },
+  '&[data-state="delayed-open"][data-side="right"]': {
+    animationName: "slideLeftAndFade",
+  },
+  '&[data-state="delayed-open"][data-side="bottom"]': {
+    animationName: "slideUpAndFade",
+  },
+  '&[data-state="delayed-open"][data-side="left"]': {
+    animationName: "slideRightAndFade",
+  },
+});
+
+const TooltipArrow = styled(TooltipPrimitive.Arrow, {
+  fill: "$dark800",
+});
+
+export interface TooltipProps {
+  children: React.ReactNode;
+  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({
+  children,
+  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={useTouchBehavior ? 0 : delayDuration}
+        {...(useTouchBehavior
+          ? { open, onOpenChange: handleTouchOpenChange }
+          : {})}
+      >
+        <TooltipTrigger asChild>{triggerChild}</TooltipTrigger>
+        <TooltipContent side={side} sideOffset={5}>
+          {tooltipContent}
+          <TooltipArrow />
+        </TooltipContent>
+      </TooltipRoot>
+    </TooltipProvider>
+  );
+}
+
+export { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent };

package/src/components/Tooltip/styles.ts

@@ -1,78 +1,78 @@
-import { keyframes } from '@stitches/react'
-import { styled } from '../../styles'
-
-const slideUpAndFade = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'translateY(2px)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'translateY(0)',
-  },
-})
-
-const slideRightAndFade = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'translateX(-2px)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'translateX(0)',
-  },
-})
-
-const slideDownAndFade = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'translateY(-2px)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'translateY(0)',
-  },
-})
-
-const slideLeftAndFade = keyframes({
-  from: {
-    opacity: 0,
-    transform: 'translateX(2px)',
-  },
-  to: {
-    opacity: 1,
-    transform: 'translateX(0)',
-  },
-})
-
-export const TooltipContentStyled = styled('div', {
-  fontFamily: '$default',
-  backgroundColor: '$dark700',
-  color: '$dark50',
-  borderRadius: '$sm',
-  padding: '$10 $14',
-  fontSize: '$13',
-  lineHeight: '$base',
-  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
-  userSelect: 'none',
-  animationDuration: '400ms',
-  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
-  willChange: 'transform, opacity',
-
-  '&[data-state="delayed-open"][data-side="top"]': {
-    animationName: `${slideDownAndFade}`,
-  },
-  '&[data-state="delayed-open"][data-side="right"]': {
-    animationName: `${slideLeftAndFade}`,
-  },
-  '&[data-state="delayed-open"][data-side="bottom"]': {
-    animationName: `${slideUpAndFade}`,
-  },
-  '&[data-state="delayed-open"][data-side="left"]': {
-    animationName: `${slideRightAndFade}`,
-  },
-})
-
-export const TooltipArrow = styled('div', {
-  fill: '$dark700',
+import { keyframes } from '@stitches/react'
+import { styled } from '../../styles'
+
+const slideUpAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+})
+
+const slideRightAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateX(-2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+})
+
+const slideDownAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateY(-2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateY(0)',
+  },
+})
+
+const slideLeftAndFade = keyframes({
+  from: {
+    opacity: 0,
+    transform: 'translateX(2px)',
+  },
+  to: {
+    opacity: 1,
+    transform: 'translateX(0)',
+  },
+})
+
+export const TooltipContentStyled = styled('div', {
+  fontFamily: '$default',
+  backgroundColor: '$dark700',
+  color: '$dark50',
+  borderRadius: '$sm',
+  padding: '$10 $14',
+  fontSize: '$13',
+  lineHeight: '$base',
+  boxShadow: '0px 4px 4px 0px rgba(35, 53, 67, 0.08)',
+  userSelect: 'none',
+  animationDuration: '400ms',
+  animationTimingFunction: 'cubic-bezier(0.16, 1, 0.3, 1)',
+  willChange: 'transform, opacity',
+
+  '&[data-state="delayed-open"][data-side="top"]': {
+    animationName: `${slideDownAndFade}`,
+  },
+  '&[data-state="delayed-open"][data-side="right"]': {
+    animationName: `${slideLeftAndFade}`,
+  },
+  '&[data-state="delayed-open"][data-side="bottom"]': {
+    animationName: `${slideUpAndFade}`,
+  },
+  '&[data-state="delayed-open"][data-side="left"]': {
+    animationName: `${slideRightAndFade}`,
+  },
+})
+
+export const TooltipArrow = styled('div', {
+  fill: '$dark700',
 }) 

package/src/hooks/useCountries.ts

@@ -1,41 +1,41 @@
-import countries from "i18n-iso-countries";
-import pt from "i18n-iso-countries/langs/pt.json";
-import en from "i18n-iso-countries/langs/en.json";
-import es from "i18n-iso-countries/langs/es.json";
-
-type Language = "pt-BR" | "en" | "es";
-
-type Option = {
-  value: string;
-  label: string;
-};
-
-export function useCountries(language: Language = "pt-BR"): Option[] {
-  countries.registerLocale(pt);
-  countries.registerLocale(en);
-  countries.registerLocale(es);
-
-  const langMap = {
-    "pt-BR": "pt",
-    en: "en",
-    es: "es",
-  } as const;
-
-  const langCode = langMap[language];
-
-  const namesPT = countries.getNames("pt", { select: "official" });
-  const namesLang = countries.getNames(langCode, { select: "official" });
-
-  return Object.entries(namesPT).map(([_, namePT]) => {
-    const nameTranslated =
-      Object.entries(namesLang).find(([, name]) => namePT === name) ??
-      Object.entries(namesPT).find(([, name]) => name === namePT);
-
-    const label = nameTranslated?.[1] || namePT;
-
-    return {
-      value: namePT,
-      label,
-    };
-  });
-}
+import countries from "i18n-iso-countries";
+import pt from "i18n-iso-countries/langs/pt.json";
+import en from "i18n-iso-countries/langs/en.json";
+import es from "i18n-iso-countries/langs/es.json";
+
+type Language = "pt-BR" | "en" | "es";
+
+type Option = {
+  value: string;
+  label: string;
+};
+
+export function useCountries(language: Language = "pt-BR"): Option[] {
+  countries.registerLocale(pt);
+  countries.registerLocale(en);
+  countries.registerLocale(es);
+
+  const langMap = {
+    "pt-BR": "pt",
+    en: "en",
+    es: "es",
+  } as const;
+
+  const langCode = langMap[language];
+
+  const namesPT = countries.getNames("pt", { select: "official" });
+  const namesLang = countries.getNames(langCode, { select: "official" });
+
+  return Object.entries(namesPT).map(([_, namePT]) => {
+    const nameTranslated =
+      Object.entries(namesLang).find(([, name]) => namePT === name) ??
+      Object.entries(namesPT).find(([, name]) => name === namePT);
+
+    const label = nameTranslated?.[1] || namePT;
+
+    return {
+      value: namePT,
+      label,
+    };
+  });
+}

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