@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 _extends from "@babel/runtime/helpers/esm/extends";
import * as React from "react";
import cx from "clsx";
import Portal from "../../Portal";
import useRandomId from "../../hooks/useRandomId";
import TooltipContent from "./components/TooltipContent";
import useStateWithTimeout from "../../hooks/useStateWithTimeout";
export const TooltipWrapper = /*#__PURE__*/React.forwardRef(({
  block,
  enabled,
  removeUnderlinedText,
  ...props
}, ref) => {
  return /*#__PURE__*/React.createElement("span", _extends({
    className: cx("orbit-tooltip-wrapper", "max-w-full cursor-auto", "focus:outline-none active:outline-none [&_:disabled]:pointer-events-none", block ? "flex" : "inline-flex", enabled && !removeUnderlinedText && "[&_.orbit-text]:inline-block [&_.orbit-text]:underline [&_.orbit-text]:decoration-current [&_.orbit-text]:decoration-dotted"),
    ref: ref,
    role: "button"
  }, props));
});
const TooltipPrimitive = ({
  children,
  enabled = true,
  tooltipShown,
  tabIndex = "0",
  onShow,
  dataTest,
  id,
  renderInPortal = true,
  size = "small",
  content,
  error,
  help,
  stopPropagation = false,
  removeUnderlinedText,
  block = false,
  ...popper
}) => {
  const [shown, setShown] = React.useState(false);
  const [referenceElement, setReferenceElement] = React.useState(null);
  const [render, setRender, setRenderWithTimeout, clearRenderTimeout] = useStateWithTimeout(false, 200);
  const tooltipId = useRandomId();
  const handleIn = React.useCallback(() => {
    setRender(true);
    setShown(true);
    if (onShow) onShow();
    clearRenderTimeout();
  }, [clearRenderTimeout, setRender, onShow]);
  const handleOut = React.useCallback(() => {
    setShown(false);
    setRenderWithTimeout(false);
  }, [setRenderWithTimeout]);
  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, _extends({
    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
  }, popper, {
    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": enabled ? id || tooltipId : undefined,
    tabIndex: enabled ? Number(tabIndex) : undefined,
    enabled: enabled,
    removeUnderlinedText: removeUnderlinedText,
    block: block
  }, children), enabled && render && (renderInPortal ? /*#__PURE__*/React.createElement(Portal, {
    renderInto: "tooltips"
  }, tooltip) : tooltip));
};
export default TooltipPrimitive;