@kiwicom/orbit-components/es/primitives/TooltipPrimitive/index.js

Orbit-components is a React component library which provides developers with the easiest possible way of building Kiwi.com's products.

import * as React from "react";
import { FloatingPortal } from "@floating-ui/react";
import useRandomId from "../../hooks/useRandomId";
import useStateWithTimeout from "../../hooks/useStateWithTimeout";
import TooltipContent from "./components/TooltipContent";
import TooltipWrapper from "./components/TooltipWrapper";
const TooltipPrimitive = ({
  children,
  enabled = true,
  tooltipShown,
  tabIndex = "0",
  onShow,
  dataTest,
  id,
  renderInPortal = true,
  size = "small",
  content,
  error,
  help,
  stopPropagation = false,
  removeUnderlinedText,
  block = false,
  placement,
  noFlip,
  offset
}) => {
  const [shown, setShown] = React.useState(false);
  const [referenceElement, setReferenceElement] = React.useState(null);
  const [render, setRender, setRenderWithTimeout, clearRenderTimeout] = useStateWithTimeout(false, 200);
  const tooltipId = useRandomId();
  const handleEsc = React.useCallback(ev => {
    if (ev.key === "Escape") {
      setShown(false);
      setRenderWithTimeout(false);
      document.removeEventListener("keydown", handleEsc);
    }
  }, [setRenderWithTimeout]);
  const handleOut = React.useCallback(() => {
    setShown(false);
    setRenderWithTimeout(false);
    document.removeEventListener("keydown", handleEsc);
  }, [handleEsc, setRenderWithTimeout]);
  const handleIn = React.useCallback(() => {
    setRender(true);
    setShown(true);
    if (onShow) onShow();
    clearRenderTimeout();
    document.addEventListener("keydown", handleEsc);
  }, [setRender, onShow, clearRenderTimeout, handleEsc]);
  const handleClick = React.useCallback(ev => {
    if (stopPropagation) {
      ev.stopPropagation();
    }
  }, [stopPropagation]);
  React.useEffect(() => {
    if (tooltipShown) {
      handleIn();
    } else {
      handleOut();
    }
  }, [tooltipShown, handleIn, handleOut]);
  const handleOutMobile = React.useCallback(() => {
    setRenderWithTimeout(false);
  }, [setRenderWithTimeout]);
  if (!enabled) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
  const tooltip = /*#__PURE__*/React.createElement(TooltipContent, {
    parent: children,
    dataTest: dataTest,
    id: id,
    shown: shown,
    size: size,
    error: error,
    help: help,
    tooltipId: id || tooltipId,
    onClick: handleClick,
    onClose: handleOut,
    onCloseMobile: handleOutMobile,
    onEnter: handleIn,
    placement: placement,
    noFlip: noFlip,
    offset: offset,
    referenceElement: referenceElement
  }, content);
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TooltipWrapper, {
    onMouseEnter: handleIn,
    onMouseLeave: handleOut,
    onClick: handleClick,
    onFocus: handleIn,
    onBlur: handleOut,
    ref: setReferenceElement,
    "aria-describedby": shown ? id || tooltipId : undefined,
    tabIndex: enabled ? Number(tabIndex) : undefined,
    enabled: enabled,
    removeUnderlinedText: removeUnderlinedText,
    block: block
  }, children), enabled && render && (renderInPortal ? /*#__PURE__*/React.createElement(FloatingPortal, {
    id: "tooltips"
  }, tooltip) : tooltip));
};
export default TooltipPrimitive;