@kiwicom/orbit-components/lib/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.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
exports.__esModule = true;
exports.default = void 0;
var React = _interopRequireWildcard(require("react"));
var _react2 = require("@floating-ui/react");
var _useRandomId = _interopRequireDefault(require("../../hooks/useRandomId"));
var _useStateWithTimeout = _interopRequireDefault(require("../../hooks/useStateWithTimeout"));
var _TooltipContent = _interopRequireDefault(require("./components/TooltipContent"));
var _TooltipWrapper = _interopRequireDefault(require("./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] = (0, _useStateWithTimeout.default)(false, 200);
  const tooltipId = (0, _useRandomId.default)();
  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.default, {
    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.default, {
    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(_react2.FloatingPortal, {
    id: "tooltips"
  }, tooltip) : tooltip));
};
var _default = exports.default = TooltipPrimitive;