@redocly/theme/lib/components/Tooltip/Tooltip.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = void 0;
exports.TooltipComponent = TooltipComponent;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importStar(require("styled-components"));
const hooks_1 = require("../../core/hooks");
function TooltipComponent({ children, isOpen, tip, withArrow = true, placement = 'top', className = 'default', width, dataTestId, }) {
    const ref = (0, react_1.useRef)(null);
    const { isOpened, handleOpen, handleClose } = (0, hooks_1.useControl)(isOpen);
    (0, hooks_1.useOutsideClick)(ref, handleClose);
    const isControlled = isOpen !== undefined;
    (0, react_1.useEffect)(() => {
        if (isControlled) {
            if (isOpen) {
                handleOpen();
            }
            else {
                handleClose();
            }
        }
    }, [isOpen, isControlled, handleOpen, handleClose]);
    const controllers = !isControlled && {
        onMouseEnter: handleOpen,
        onMouseLeave: handleClose,
        onClick: handleClose,
    };
    return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: ref }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip" }),
        children,
        isOpened && (react_1.default.createElement(TooltipBody, { "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow }, tip))));
}
exports.Tooltip = (0, react_1.memo)(TooltipComponent);
const PLACEMENTS = {
    top: (0, styled_components_1.css) `
    top: 0;
    left: 50%;
    transform: translate(-50%, -99%);
    margin-top: -10px;

    ${({ withArrow }) => withArrow &&
        (0, styled_components_1.css) `
        &::after {
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top-width: 6px;
          border-top-style: solid;
          bottom: 0;
          left: 50%;
          transform: translate(-50%, 99%);
        }
      `}
  `,
    bottom: (0, styled_components_1.css) `
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 99%);
    margin-bottom: -10px;

    ${({ withArrow }) => withArrow &&
        (0, styled_components_1.css) `
        &::after {
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-bottom-width: 6px;
          border-bottom-style: solid;
          top: 0;
          left: 50%;
          transform: translate(-50%, -99%);
        }
      `}
  `,
    left: (0, styled_components_1.css) `
    top: 50%;
    left: 0;
    transform: translate(-100%, -50%);
    margin-left: -10px;

    ${({ withArrow }) => withArrow &&
        (0, styled_components_1.css) `
        &::after {
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-left-width: 6px;
          border-left-style: solid;
          top: 50%;
          right: 0;
          transform: translate(99%, -50%);
        }
      `}
  `,
    right: (0, styled_components_1.css) `
    top: 50%;
    right: 0;
    transform: translate(100%, -50%);
    margin-right: -10px;

    ${({ withArrow }) => withArrow &&
        (0, styled_components_1.css) `
        &::after {
          border-top: 5px solid transparent;
          border-bottom: 5px solid transparent;
          border-right-width: 6px;
          border-right-style: solid;
          top: 50%;
          left: 0;
          transform: translate(-99%, -50%);
        }
      `}
  `,
};
const TooltipWrapper = styled_components_1.default.div `
  position: relative;
  display: flex;
`;
const TooltipBody = styled_components_1.default.span `
  display: inline-block;

  position: absolute;
  text-align: center;

  padding: var(--tooltip-padding);
  max-width: var(--tooltip-max-width);
  white-space: normal;
  overflow-wrap: break-word;

  border-radius: var(--border-radius);
  transition: opacity 0.3s ease-out;

  font-size: 13px;

  z-index: var(--z-index-overlay);

  &::after {
    position: absolute;

    content: ' ';
    display: inline-block;
    width: 0;
    height: 0;
    border-color: var(--tooltip-bg-color);
  }

  background: var(--tooltip-bg-color);
  color: var(--tooltip-text-color);
  box-shadow: rgb(0 0 0 / 25%) 0 2px 4px;

  width: ${({ width }) => width || '120px'};
  ${({ placement }) => (0, styled_components_1.css) `
    ${PLACEMENTS[placement]};
  `}
`;
//# sourceMappingURL=Tooltip.js.map