@redocly/theme/lib/components/Tooltip/AnchorTooltip.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 () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Tooltip = void 0;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importStar(require("styled-components"));
const hooks_1 = require("../../core/hooks");
const Portal_1 = require("../../components/Portal/Portal");
function TooltipComponent({ children, isOpen, tip, withArrow = true, placement = 'top', className = 'default', width, dataTestId, disabled = false, arrowPosition = 'center', onClick, }) {
    const tooltipWrapperRef = (0, react_1.useRef)(null);
    const tooltipBodyRef = (0, react_1.useRef)(null);
    const { isOpened, handleOpen, handleClose } = (0, hooks_1.useControl)(isOpen);
    const anchorName = `--tooltip${(0, react_1.useId)().replace(/:/g, '')}`;
    (0, hooks_1.useOutsideClick)(isOpened ? [tooltipWrapperRef, tooltipBodyRef] : tooltipWrapperRef, handleClose);
    const isControlled = isOpen !== undefined;
    (0, react_1.useEffect)(() => {
        if (!isControlled)
            return;
        if (isOpen && !disabled) {
            handleOpen();
        }
        else {
            handleClose();
        }
    }, [isOpen, disabled, isControlled, handleOpen, handleClose]);
    const controllers = !isControlled && !disabled
        ? {
            onMouseEnter: handleOpen,
            onMouseLeave: handleClose,
            onClick: (e) => {
                onClick === null || onClick === void 0 ? void 0 : onClick(e);
                handleClose();
            },
            onFocus: handleOpen,
            onBlur: handleClose,
        }
        : {};
    return (react_1.default.createElement(TooltipWrapper, Object.assign({ ref: tooltipWrapperRef }, controllers, { className: `tooltip-${className}`, "data-component-name": "Tooltip/Tooltip", anchorName: anchorName }),
        children,
        isOpened && !disabled && (react_1.default.createElement(Portal_1.Portal, null,
            react_1.default.createElement(TooltipBody, { ref: tooltipBodyRef, "data-testid": dataTestId || (typeof tip === 'string' ? tip : ''), placement: placement, width: width, withArrow: withArrow, arrowPosition: arrowPosition, anchorName: anchorName }, tip)))));
}
exports.Tooltip = (0, react_1.memo)(TooltipComponent);
const PLACEMENTS = {
    top: (0, styled_components_1.css) `
    bottom: anchor(top);
    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
        ? (0, styled_components_1.css) `
            transform: translate(-32px, -6px);
            left: anchor(center);
          `
        : arrowPosition === 'right'
            ? (0, styled_components_1.css) `
              transform: translate(32px, -6px);
              right: anchor(center);
            `
            : (0, styled_components_1.css) `
              transform: translate(-50%, -6px);
              left: anchor(center);
            `}

    ${({ withArrow, arrowPosition }) => withArrow &&
        (0, styled_components_1.css) `
        &::after {
          border-left: 14px solid transparent;
          border-right: 14px solid transparent;
          border-top-width: 8px;
          border-top-style: solid;
          border-radius: 2px;
          bottom: 0;
          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(100%);'}
          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, 100%);'}
          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(100%);'}
        }
      `}
  `,
    bottom: (0, styled_components_1.css) `
    top: anchor(bottom);
    ${({ withArrow, arrowPosition }) => withArrow && arrowPosition === 'left'
        ? (0, styled_components_1.css) `
            transform: translate(-32px, 6px);
            left: anchor(center);
          `
        : arrowPosition === 'right'
            ? (0, styled_components_1.css) `
              transform: translate(32px, 6px);
              right: anchor(center);
            `
            : (0, styled_components_1.css) `
              transform: translate(-50%, 6px);
              left: anchor(center);
            `}

    ${({ withArrow, arrowPosition }) => withArrow &&
        (0, styled_components_1.css) `
        &::after {
          border-left: 14px solid transparent;
          border-right: 14px solid transparent;
          border-bottom-width: 8px;
          border-bottom-style: solid;
          border-radius: 0 0 2px 2px;
          top: 0;
          ${arrowPosition === 'left' && 'left: 16px; transform: translateY(-100%);'}
          ${arrowPosition === 'center' && 'left: 50%; transform: translate(-50%, -100%);'}
          ${arrowPosition === 'right' && 'right: 16px; transform: translateY(-100%);'}
        }
      `}
  `,
    left: (0, styled_components_1.css) `
    transform: translate(-100%, -50%);
    margin-left: -7px;
    top: anchor(center);
    left: anchor(left);

    ${({ withArrow }) => withArrow &&
        (0, styled_components_1.css) `
        &::after {
          border-top: 14px solid transparent;
          border-bottom: 14px solid transparent;
          border-left-width: 8px;
          border-left-style: solid;
          border-radius: 2px 0 0 2px;
          right: -9px;
          top: 50%;
          transform: translateY(-50%);
        }
      `}
  `,
    right: (0, styled_components_1.css) `
    transform: translate(0, -50%);
    margin-left: 7px;
    top: anchor(center);
    left: anchor(right);

    ${({ withArrow }) => withArrow &&
        (0, styled_components_1.css) `
        &::after {
          border-top: 14px solid transparent;
          border-bottom: 14px solid transparent;
          border-right-width: 8px;
          border-right-style: solid;
          border-radius: 0 2px 2px 0;
          left: -9px;
          top: 50%;
          transform: translateY(-50%);
        }
      `}
  `,
};
const TooltipWrapper = styled_components_1.default.div.attrs(({ anchorName }) => ({
    style: {
        anchorName: anchorName,
    },
})) `
  display: flex;
`;
const TooltipBody = styled_components_1.default.span.attrs(({ anchorName }) => ({
    style: {
        positionAnchor: anchorName,
    },
})) `
  position: fixed;
  min-width: 64px;
  padding: var(--tooltip-padding);
  max-width: var(--tooltip-max-width);
  white-space: normal;
  word-break: normal;
  overflow-wrap: break-word;
  text-align: left;

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

  font-size: var(--font-size-base);
  line-height: var(--line-height-base);

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

  &::after {
    position: absolute;

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

  background: var(--tooltip-bg-color);
  color: var(--tooltip-text-color);
  border: var(--tooltip-border-width, 0) var(--tooltip-border-style, solid)
    var(--tooltip-border-color, transparent);
  box-shadow: var(--bg-raised-shadow);

  width: ${({ width }) => width || 'max-content'};

  ${({ placement }) => (0, styled_components_1.css) `
    ${PLACEMENTS[placement]};
  `}
`;
//# sourceMappingURL=AnchorTooltip.js.map