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

"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 = _interopRequireWildcard(require("styled-components"));

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

var _useClickOutside = _interopRequireDefault(require("../../hooks/useClickOutside"));

var _keyMaps = _interopRequireDefault(require("../../common/keyMaps"));

var _handleKeyDown = _interopRequireDefault(require("../../utils/handleKeyDown"));

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

var _mediaQuery = _interopRequireDefault(require("../../utils/mediaQuery"));

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

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

var _Close = _interopRequireDefault(require("../../icons/Close"));

var _rtl = require("../../utils/rtl");

var _resolveColor = _interopRequireDefault(require("./helpers/resolveColor"));

var _resolvePlacement = _interopRequireDefault(require("./helpers/resolvePlacement"));

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

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

var StyledArrow = (0, _styledComponents.default)( /*#__PURE__*/React.forwardRef(function (_ref, ref) {
  var className = _ref.className;
  return /*#__PURE__*/React.createElement("div", {
    className: className,
    ref: ref
  });
})).withConfig({
  displayName: "Tooltip__StyledArrow",
  componentId: "sc-1xn0839-0"
})(["", ""], function (_ref2) {
  var position = _ref2.position,
      top = _ref2.top,
      left = _ref2.left,
      bottom = _ref2.bottom,
      popperRight = _ref2.right,
      transform = _ref2.transform;
  return (0, _styledComponents.css)(["position:", ";top:", ";left:", ";right:", ";bottom:", ";transform:", ";&:before{content:\"\";background:", ";width:0.6rem;height:0.6rem;transform:translate(-50%,-50%) rotate(45deg);position:absolute;}"], position, top, left, popperRight, bottom, transform, _resolveColor.default);
});

var StyledFormFeedbackTooltip = _styledComponents.default.div.withConfig({
  displayName: "Tooltip__StyledFormFeedbackTooltip",
  componentId: "sc-1xn0839-1"
})(["", ""], function (_ref3) {
  var theme = _ref3.theme,
      isHelp = _ref3.isHelp,
      shown = _ref3.shown,
      inputSize = _ref3.inputSize,
      top = _ref3.top,
      left = _ref3.left,
      position = _ref3.position,
      bottom = _ref3.bottom,
      popperRight = _ref3.right,
      transform = _ref3.transform;
  return (0, _styledComponents.css)(["display:flex;justify-content:space-between;align-items:center;box-sizing:border-box;border-radius:", ";box-shadow:", ";padding:", ";padding-", ":", ";z-index:10;max-height:none;overflow:visible;width:", ";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, inputSize === "small" ? theme.orbit.spaceXSmall : theme.orbit.spaceSmall, _rtl.right, isHelp && theme.orbit.spaceSmall, "calc(100% + ".concat(_consts.SIDE_NUDGE * 2, "px)"), _resolveColor.default, shown ? "visible" : "hidden", shown ? "1" : "0", theme.orbit.durationFast, theme.orbit.durationFast, position, top, left, bottom, popperRight, transform, StyledArrow, _resolvePlacement.default, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["width:auto;"])));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

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

var StyledTooltipContent = _styledComponents.default.div.withConfig({
  displayName: "Tooltip__StyledTooltipContent",
  componentId: "sc-1xn0839-2"
})(["", ""], function (_ref4) {
  var theme = _ref4.theme;
  return (0, _styledComponents.css)(["display:flex;align-items:center;height:100%;font-family:", ";font-size:", ";font-weight:", ";line-height:", ";color:", ";& ", ",", ",a{color:", ";font-weight:", ";}", ";"], theme.orbit.fontFamily, theme.orbit.fontSizeTextNormal, theme.orbit.fontWeightNormal, theme.orbit.lineHeightText, theme.orbit.paletteWhite, _Text.StyledText, _ListItem.Item, theme.orbit.paletteWhite, theme.orbit.fontWeightNormal, _mediaQuery.default.largeMobile((0, _styledComponents.css)(["font-size:", ";font-weight:", ";", ",", ",a{font-weight:", ";font-size:", ";}a:hover{color:", ";}a:focus{color:", ";}"], theme.orbit.fontSizeTextSmall, theme.orbit.fontWeightMedium, _Text.StyledText, _ListItem.Item, theme.orbit.fontWeightMedium, theme.orbit.fontSizeTextSmall, theme.orbit.paletteWhite, theme.orbit.paletteWhite)));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

var StyledCloseButton = _styledComponents.default.a.withConfig({
  displayName: "Tooltip__StyledCloseButton",
  componentId: "sc-1xn0839-3"
})(["", ""], function (_ref5) {
  var theme = _ref5.theme;
  return (0, _styledComponents.css)(["color:", ";cursor:pointer;margin:", ";display:flex;"], theme.orbit.paletteWhite, (0, _rtl.rtlSpacing)("0 0 0 ".concat(theme.orbit.spaceSmall)));
}); // $FlowFixMe: https://github.com/flow-typed/flow-typed/issues/3653#issuecomment-568539198


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

var ErrorFormTooltip = function ErrorFormTooltip(_ref6) {
  var onShown = _ref6.onShown,
      dataTest = _ref6.dataTest,
      inputSize = _ref6.inputSize,
      children = _ref6.children,
      shown = _ref6.shown,
      referenceElement = _ref6.referenceElement,
      inlineLabel = _ref6.inlineLabel,
      _ref6$isHelp = _ref6.isHelp,
      isHelp = _ref6$isHelp === void 0 ? false : _ref6$isHelp,
      id = _ref6.id;
  var contentRef = React.useRef(null);

  var _useTheme = (0, _useTheme2.default)(),
      rtl = _useTheme.rtl;

  var _React$useState = React.useState(null),
      _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
      tooltipRef = _React$useState2[0],
      setTooltipRef = _React$useState2[1];

  var _React$useState3 = React.useState(null),
      _React$useState4 = (0, _slicedToArray2.default)(_React$useState3, 2),
      arrowRef = _React$useState4[0],
      setArrowRef = _React$useState4[1];

  var resolveOffset = React.useCallback(function () {
    if (inlineLabel) {
      if (inputSize === "small") return [rtl ? 10 : -14, 7];
      return [rtl ? 6 : -6, 6];
    }

    return [rtl ? 10 : -10, 7];
  }, [inlineLabel, inputSize, rtl]);

  var _usePopper = (0, _reactPopper.usePopper)(referenceElement === null || referenceElement === void 0 ? void 0 : referenceElement.current, tooltipRef, {
    placement: rtl ? "top-end" : "top-start",
    modifiers: [{
      name: "offset",
      options: {
        offset: resolveOffset
      }
    }, {
      name: "arrow",
      options: {
        element: arrowRef
      }
    }, {
      name: "eventListeners",
      options: {
        scroll: false
      }
    }]
  }),
      styles = _usePopper.styles,
      attrs = _usePopper.attributes,
      update = _usePopper.update;

  var popper = styles.popper,
      arrow = styles.arrow;
  (0, _useClickOutside.default)(contentRef, function () {
    if (!isHelp) onShown(false);
  });
  React.useEffect(function () {
    if (update) update();
  }, [update, resolveOffset, shown]);
  React.useEffect(function () {
    var link = tooltipRef === null || tooltipRef === void 0 ? void 0 : tooltipRef.querySelector("a");

    var handleTab = function handleTab(ev) {
      if (isHelp) return;

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

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

    window.addEventListener("keydown", handleTab);
    return function () {
      window.removeEventListener("keydown", handleTab);
    };
  }, [onShown, isHelp, tooltipRef]);
  return /*#__PURE__*/React.createElement(StyledFormFeedbackTooltip, {
    id: id,
    ref: setTooltipRef,
    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,
    position: popper.position,
    placement: attrs.popper && attrs.popper["data-popper-placement"],
    top: arrow.top,
    left: arrow.left,
    right: arrow.right,
    bottom: arrow.bottom
  }), /*#__PURE__*/React.createElement(StyledTooltipContent, {
    ref: contentRef
  }, children), isHelp && /*#__PURE__*/React.createElement(StyledCloseButton, {
    tabIndex: 0 // $FlowFixMe: TODO
    ,
    onKeyDown: (0, _handleKeyDown.default)(onShown),
    onClick: function onClick(ev) {
      ev.preventDefault();
      if (shown) onShown(false);
    }
  }, /*#__PURE__*/React.createElement(_Close.default, {
    ariaLabel: "close",
    size: "small"
  })));
};

var _default = ErrorFormTooltip;
exports.default = _default;