@kiwicom/orbit-components/lib/primitives/TooltipPrimitive/components/TooltipContent.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 _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var React = _interopRequireWildcard(require("react"));

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _reactPopper = require("react-popper");

var _consts = require("../../../common/consts");

var _tooltipSize = _interopRequireDefault(require("../helpers/tooltipSize"));

var _Text = require("../../../Text");

var _ListItem = require("../../../List/ListItem");

var _resolveBackgroundColor = _interopRequireDefault(require("../helpers/resolveBackgroundColor"));

var _resolveArrow = require("../helpers/resolveArrow");

var _tooltipPadding = _interopRequireDefault(require("../helpers/tooltipPadding"));

var _defaultTheme = _interopRequireDefault(require("../../../defaultTheme"));

var _TextLink = require("../../../TextLink");

var _transition = _interopRequireDefault(require("../../../utils/transition"));

var _consts2 = _interopRequireDefault(require("../../../hooks/useFocusTrap/consts"));

const StyledTooltip = _styledComponents.default.div.withConfig({
  displayName: "TooltipContent__StyledTooltip",
  componentId: "sc-1eptatj-0"
})(["width:100%;"]);

const StyledTooltipArrow = _styledComponents.default.div.withConfig({
  displayName: "TooltipContent__StyledTooltipArrow",
  componentId: "sc-1eptatj-1"
})(["", ""], ({
  transform,
  position
}) => (0, _styledComponents.css)(["position:", ";transform:", ";", ";&:after{position:absolute;content:\"\";width:0;height:0;border-style:solid;", ";}"], position, transform, _resolveArrow.resolveArrowPlacement, _resolveArrow.resolveArrowStyle)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledTooltipArrow.defaultProps = {
  theme: _defaultTheme.default
};

const StyledTooltipWrapper = _styledComponents.default.div.withConfig({
  displayName: "TooltipContent__StyledTooltipWrapper",
  componentId: "sc-1eptatj-2"
})(["", ""], ({
  theme,
  shown,
  popper
}) => (0, _styledComponents.css)(["display:block;", ";width:auto;max-width:", ";box-sizing:border-box;padding:", ";border-radius:", ";background:", ";box-shadow:", ";visibility:", ";opacity:", ";transition:", ";z-index:10012;overflow-y:scroll;overflow:visible;img{max-width:100%;}"], popper, _tooltipSize.default, _tooltipPadding.default, theme.orbit.borderRadiusNormal, _resolveBackgroundColor.default, theme.orbit.boxShadowRaised, shown ? "visible" : "hidden", shown ? "1" : "0", (0, _transition.default)(["opacity", "visibility"], "fast", "ease-in-out"))); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledTooltipWrapper.defaultProps = {
  theme: _defaultTheme.default
};

const StyledTooltipContent = _styledComponents.default.div.withConfig({
  displayName: "TooltipContent__StyledTooltipContent",
  componentId: "sc-1eptatj-3"
})(["", ""], ({
  theme
}) => (0, _styledComponents.css)(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";margin-bottom:0;& ", ",", "{font-size:", ";font-weight:", ";color:", ";}& ", "{color:", ";}"], theme.orbit.fontFamily, theme.orbit.fontSizeTextSmall, theme.orbit.fontWeightMedium, theme.orbit.lineHeightTextNormal, theme.orbit.paletteWhite, _Text.StyledText, _ListItem.Item, theme.orbit.fontSizeTextSmall, theme.orbit.fontWeightMedium, theme.orbit.paletteWhite, _TextLink.StyledTextLink, theme.orbit.paletteWhite)); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


StyledTooltipContent.defaultProps = {
  theme: _defaultTheme.default
};

const TooltipContent = ({
  dataTest,
  shown,
  size,
  tooltipId,
  error,
  help,
  children,
  onClose,
  onCloseMobile,
  onEnter,
  placement = _consts.PLACEMENTS.AUTO,
  noFlip,
  offset = [0, 5],
  referenceElement
}) => {
  const [tooltip, setTooltipRef] = React.useState(null);
  const [arrowRef, setArrowRef] = React.useState(null);
  const [contentHeight, setContentHeight] = React.useState(0);
  const content = React.useRef(null);
  const {
    styles,
    attributes: attrs,
    update
  } = (0, _reactPopper.usePopper)(referenceElement, tooltip, {
    placement,
    modifiers: [{
      name: "arrow",
      options: {
        element: arrowRef
      }
    }, {
      name: "offset",
      options: {
        offset
      }
    }, {
      name: "flip",
      enabled: !noFlip
    }]
  });
  React.useEffect(() => {
    if (update) update();
    if (content.current) setContentHeight(content.current.clientHeight);
  }, [update, setContentHeight]);
  const {
    popper,
    arrow
  } = styles;
  const handleInnerClick = React.useCallback(ev => {
    if (tooltip) {
      const focusableElements = tooltip.querySelectorAll(_consts2.default);

      if (Object.values(focusableElements).some(v => v === ev.target)) {
        onClose();
        onCloseMobile();
      }
    }
  }, [onClose, onCloseMobile, tooltip]);
  return /*#__PURE__*/React.createElement(StyledTooltip, {
    role: "tooltip",
    id: tooltipId,
    "data-test": dataTest
  }, /*#__PURE__*/React.createElement(StyledTooltipWrapper, {
    shown: shown,
    size: size,
    ref: setTooltipRef,
    error: error,
    help: help,
    role: "tooltip",
    "aria-hidden": !shown,
    onMouseEnter: onEnter,
    onMouseLeave: onClose,
    contentHeight: contentHeight,
    onClick: handleInnerClick,
    popper: (0, _objectSpread2.default)({}, popper)
  }, /*#__PURE__*/React.createElement(StyledTooltipContent, {
    ref: content
  }, children), /*#__PURE__*/React.createElement(StyledTooltipArrow, {
    ref: setArrowRef,
    position: arrow.position,
    transform: arrow.transform,
    contentHeight: contentHeight,
    placement: attrs.popper && attrs.popper["data-popper-placement"]
  })));
};

var _default = TooltipContent;
exports.default = _default;