@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");

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

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

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

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

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

var _useTheme = _interopRequireDefault(require("../../../hooks/useTheme"));

var _resolveContainerPosition = _interopRequireDefault(require("../helpers/resolveContainerPosition"));

var _resolveTooltipArrowAlign = _interopRequireDefault(require("../helpers/resolveTooltipArrowAlign"));

var _resolveTooltipArrowPosition = _interopRequireDefault(require("../helpers/resolveTooltipArrowPosition"));

var _index = require("../../../Text/index");

var _index2 = require("../../../List/ListItem/index");

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

var _resolveContainerAlign = _interopRequireDefault(require("../helpers/resolveContainerAlign"));

var _tooltipArrowStyle = _interopRequireDefault(require("../helpers/tooltipArrowStyle"));

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

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

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

var _calculateTooltipPosition = _interopRequireDefault(require("../helpers/calculateTooltipPosition"));

var _calculateTooltipAlign = _interopRequireDefault(require("../helpers/calculateTooltipAlign"));

var _sortPositionsAndAligns = _interopRequireDefault(require("../helpers/sortPositionsAndAligns"));

var _useDimensions = _interopRequireDefault(require("../hooks/useDimensions"));

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

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

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

var StyledTooltipWrapper = _styledComponents.default.div.withConfig({
  displayName: "TooltipContent__StyledTooltipWrapper",
  componentId: "bwx6p5-1"
})(["display:block;position:absolute;width:auto;max-width:", ";box-sizing:border-box;border-radius:", ";background-color:", ";box-shadow:", ";padding:", ";visibility:", ";opacity:", ";transition:", ";z-index:10012;overflow-y:scroll;overflow:visible;img{max-width:100%;}top:auto;right:auto;bottom:auto;left:auto;", ";", ";&::after{width:0;height:0;border-style:solid;content:\" \";display:block;position:absolute;", ";", ";", ";}"], _tooltipSize.default, function (_ref) {
  var theme = _ref.theme;
  return theme.orbit.borderRadiusNormal;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.orbit.paletteInkNormal;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.orbit.boxShadowRaised;
}, _tooltipPadding.default, function (_ref4) {
  var shown = _ref4.shown;
  return shown ? "visible" : "hidden";
}, function (_ref5) {
  var shown = _ref5.shown;
  return shown ? "1" : "0";
}, (0, _transition.default)(["opacity", "visibility"], "fast", "ease-in-out"), _resolveContainerPosition.default, _resolveContainerAlign.default, _tooltipArrowStyle.default, _resolveTooltipArrowPosition.default, _resolveTooltipArrowAlign.default);

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

var StyledTooltipContent = _styledComponents.default.div.withConfig({
  displayName: "TooltipContent__StyledTooltipContent",
  componentId: "bwx6p5-2"
})(["font-family:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";margin-bottom:0;& ", ",", "{font-size:", ";font-weight:", ";color:", ";}& ", "{color:", ";}"], function (_ref6) {
  var theme = _ref6.theme;
  return theme.orbit.fontFamily;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.orbit.fontSizeTextSmall;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.orbit.fontWeightMedium;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.orbit.lineHeightTextNormal;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.orbit.paletteWhite;
}, _index.StyledText, _index2.Item, function (_ref11) {
  var theme = _ref11.theme;
  return theme.orbit.fontSizeTextSmall;
}, function (_ref12) {
  var theme = _ref12.theme;
  return theme.orbit.fontWeightMedium;
}, function (_ref13) {
  var theme = _ref13.theme;
  return theme.orbit.paletteWhite;
}, _TextLink.StyledTextLink, function (_ref14) {
  var theme = _ref14.theme;
  return theme.orbit.paletteWhite;
});

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

var TooltipContent = function TooltipContent(_ref15) {
  var dataTest = _ref15.dataTest,
      shown = _ref15.shown,
      size = _ref15.size,
      tooltipId = _ref15.tooltipId,
      children = _ref15.children,
      onClose = _ref15.onClose,
      onCloseMobile = _ref15.onCloseMobile,
      onEnter = _ref15.onEnter,
      preferredPosition = _ref15.preferredPosition,
      preferredAlign = _ref15.preferredAlign,
      containerRef = _ref15.containerRef,
      parent = _ref15.parent;
  var theme = (0, _useTheme.default)();
  var tooltip = (0, _react.useRef)(null);
  var content = (0, _react.useRef)(null);

  var _useMemo = (0, _react.useMemo)(function () {
    return (0, _sortPositionsAndAligns.default)(preferredPosition, preferredAlign, theme);
  }, [preferredAlign, preferredPosition, theme]),
      _useMemo2 = (0, _slicedToArray2.default)(_useMemo, 2),
      positions = _useMemo2[0],
      aligns = _useMemo2[1];

  var dimensions = (0, _useDimensions.default)({
    containerRef: containerRef,
    tooltip: tooltip,
    content: content
  }, children, parent);
  var position = (0, _react.useMemo)(function () {
    return (0, _calculateTooltipPosition.default)(positions, dimensions);
  }, [dimensions, positions]);
  var align = (0, _react.useMemo)(function () {
    return (0, _calculateTooltipAlign.default)(position, aligns, dimensions);
  }, [aligns, dimensions, position]);
  var handleInnerClick = (0, _react.useCallback)(function (ev) {
    if (tooltip.current) {
      var focusableElements = tooltip.current.querySelectorAll(_consts.default);

      if (Object.values(focusableElements).some(function (v) {
        return v === ev.target;
      })) {
        onClose();
        onCloseMobile();
      }
    }
  }, [onClose, onCloseMobile]);
  return /*#__PURE__*/_react.default.createElement(StyledTooltip, {
    role: "tooltip",
    id: tooltipId,
    "data-test": dataTest
  }, /*#__PURE__*/_react.default.createElement(StyledTooltipWrapper, {
    shown: shown && position && align,
    size: size,
    align: align,
    position: position,
    ref: tooltip,
    containerTop: dimensions.containerTop,
    containerLeft: dimensions.containerLeft,
    containerHeight: dimensions.containerHeight,
    containerWidth: dimensions.containerWidth,
    tooltipHeight: dimensions.tooltipHeight,
    tooltipWidth: dimensions.tooltipWidth,
    contentHeight: dimensions.contentHeight,
    role: "tooltip",
    "aria-hidden": !shown,
    onMouseEnter: onEnter,
    onMouseLeave: onClose,
    onClick: handleInnerClick
  }, /*#__PURE__*/_react.default.createElement(StyledTooltipContent, {
    ref: content
  }, children)));
};

var _default = TooltipContent;
exports.default = _default;