@kiwicom/orbit-components/es/ErrorFormTooltip/Tooltip/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 styled, { css } from "styled-components";
import { usePopper } from "react-popper";
import useClickOutside from "../../hooks/useClickOutside";
import KEY_CODE_MAP from "../../common/keyMaps";
import handleKeyDown from "../../utils/handleKeyDown";
import defaultTheme from "../../defaultTheme";
import media from "../../utils/mediaQuery";
import { StyledText } from "../../Text";
import { Item } from "../../List/ListItem";
import CloseIc from "../../icons/Close";
import { rtlSpacing, right } from "../../utils/rtl";
import resolveColor from "./helpers/resolveColor";
import resolvePlacement from "./helpers/resolvePlacement";
import { SIDE_NUDGE } from "./consts";
import useTheme from "../../hooks/useTheme";
const StyledArrow = styled.div.withConfig({
  displayName: "Tooltip__StyledArrow",
  componentId: "sc-1dljgob-0"
})(["position:absolute;", ";&:before{content:\"\";background:", ";width:8px;height:8px;transform:translate(-50%,-50%) rotate(45deg);position:absolute;}"], resolvePlacement, resolveColor);
const StyledFormFeedbackTooltip = styled.div.withConfig({
  displayName: "Tooltip__StyledFormFeedbackTooltip",
  componentId: "sc-1dljgob-1"
})(["", ""], ({
  theme,
  isHelp,
  shown,
  inputSize,
  top,
  left,
  position,
  bottom,
  right: popperRight,
  transform
}) => css(["display:flex;justify-content:space-between;box-sizing:border-box;border-radius:", ";box-shadow:", ";padding:", " ", ";padding-", ":", ";z-index:10;max-height:none;overflow:visible;width:min(", ",100vw);background:", ";visibility:", ";opacity:", ";transition:opacity ", " ease-in-out,visibility ", " ease-in-out;position:", ";top:", ";left:", ";bottom:", ";right:", ";transform:", ";img{max-width:100%;}", ";"], theme.orbit.borderRadiusNormal, theme.orbit.boxShadowElevatedLevel1, theme.orbit.spaceXSmall, inputSize === "small" ? theme.orbit.spaceXSmall : theme.orbit.spaceSmall, right, isHelp && theme.orbit.spaceSmall, `calc(100% - ${SIDE_NUDGE * 2}px)`, resolveColor, shown ? "visible" : "hidden", shown ? "1" : "0", theme.orbit.durationFast, theme.orbit.durationFast, position, top, left, bottom, popperRight, transform, media.largeMobile(css(["width:auto;"])))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledArrow.defaultProps = {
  theme: defaultTheme
}; // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledFormFeedbackTooltip.defaultProps = {
  theme: defaultTheme
};
const StyledTooltipContent = styled.div.withConfig({
  displayName: "Tooltip__StyledTooltipContent",
  componentId: "sc-1dljgob-2"
})(["", ""], ({
  theme
}) => css(["display:flex;align-items:center;height:100%;font-family:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";& ", ",", ",a{color:", ";font-size:", ";font-weight:", ";&:hover,&:focus{color:", ";}}", ";"], theme.orbit.fontFamily, theme.orbit.fontSizeTextNormal, theme.orbit.fontWeightNormal, theme.orbit.lineHeightText, theme.orbit.paletteWhite, StyledText, Item, theme.orbit.paletteWhite, theme.orbit.fontSizeTextNormal, theme.orbit.fontWeightNormal, theme.orbit.paletteWhite, media.largeMobile(css(["font-size:", ";font-weight:", ";", ",", ",a{font-weight:", ";font-size:", ";}"], theme.orbit.fontSizeTextSmall, theme.orbit.fontWeightMedium, StyledText, Item, theme.orbit.fontWeightMedium, theme.orbit.fontSizeTextSmall)))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledTooltipContent.defaultProps = {
  theme: defaultTheme
};
const StyledCloseButton = styled.a.withConfig({
  displayName: "Tooltip__StyledCloseButton",
  componentId: "sc-1dljgob-3"
})(["", ""], ({
  theme
}) => css(["color:", ";cursor:pointer;margin:", ";display:flex;"], theme.orbit.paletteWhite, rtlSpacing(`0 0 0 ${theme.orbit.spaceSmall}`))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198

StyledCloseButton.defaultProps = {
  theme: defaultTheme
};

const ErrorFormTooltip = ({
  onShown,
  dataTest,
  helpClosable,
  inputSize,
  children,
  shown,
  referenceElement,
  inlineLabel,
  isHelp = false,
  id
}) => {
  const contentRef = React.useRef(null);
  const {
    rtl
  } = useTheme();
  const tooltipRef = React.useRef(null);
  const [arrowRef, setArrowRef] = React.useState(null);
  const resolveOffset = React.useCallback(() => {
    if (inlineLabel) {
      if (inputSize === "small") return [0, 4];
    }

    return [0, 3];
  }, [inlineLabel, inputSize]);
  const {
    styles,
    attributes: attrs,
    update
  } = usePopper(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current, tooltipRef.current, {
    placement: rtl ? "top-end" : "top-start",
    modifiers: [{
      name: "offset",
      options: {
        offset: resolveOffset
      }
    }, {
      name: "arrow",
      options: {
        element: arrowRef
      }
    }, {
      name: "eventListeners",
      options: {
        scroll: false
      }
    }]
  });
  const {
    popper
  } = styles;
  useClickOutside(tooltipRef, () => {
    onShown(false);
  });
  React.useEffect(() => {
    if (update) update();
  }, [update, resolveOffset, shown]);
  React.useEffect(() => {
    var _tooltipRef$current;

    const link = (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.querySelector("a");

    const handleTab = ev => {
      if (isHelp) return;

      if (ev.keyCode === KEY_CODE_MAP.TAB && link) {
        onShown(true);

        if (document.activeElement === link) {
          onShown(false);
        }
      } else {
        onShown(false);
      }
    };

    window.addEventListener("keydown", handleTab);
    return () => {
      window.removeEventListener("keydown", handleTab);
    };
  }, [onShown, isHelp, helpClosable]);
  return /*#__PURE__*/React.createElement(StyledFormFeedbackTooltip, {
    id: id,
    ref: tooltipRef,
    inputSize: inputSize,
    shown: shown,
    isHelp: isHelp,
    "data-test": dataTest,
    "aria-live": "polite",
    inlineLabel: inlineLabel,
    placement: attrs.popper && attrs.popper["data-popper-placement"],
    position: popper.position,
    top: popper.top,
    left: popper.left,
    right: popper.right,
    bottom: popper.bottom,
    transform: popper.transform
  }, /*#__PURE__*/React.createElement(StyledArrow, {
    isHelp: isHelp,
    ref: setArrowRef,
    inputSize: inputSize,
    inlineLabel: inlineLabel,
    placement: attrs.popper && attrs.popper["data-popper-placement"]
  }), /*#__PURE__*/React.createElement(StyledTooltipContent, {
    ref: contentRef
  }, children), isHelp && helpClosable && /*#__PURE__*/React.createElement(StyledCloseButton, {
    tabIndex: 0 // $FlowFixMe: TODO
    ,
    onKeyDown: handleKeyDown(onShown),
    onClick: ev => {
      ev.preventDefault();
      if (shown) onShown(false);
    }
  }, /*#__PURE__*/React.createElement(CloseIc, {
    ariaLabel: "close",
    size: "small"
  })));
};

export default ErrorFormTooltip;