@dnanpm/styleguide/build/cjs/components/Tooltip/Tooltip.js

DNA Styleguide repository provides the set of components and theme object used in various DNA projects.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var icons = require('@dnanpm/icons');
var React = require('react');
var reactTooltip = require('react-tooltip');
var styledComponents = require('styled-components');
var theme = require('../../themes/theme.js');
var common = require('../../utils/common.js');
var styledUtils = require('../../utils/styledUtils.js');
var Icon = require('../Icon/Icon.js');

function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefaultCompat(React);

const Helper = styledComponents.styled.button `
    display: inline-block;
    vertical-align: middle;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    color: inherit;
    font: inherit;
    text-align: inherit;
    text-decoration: none;
    outline: inherit;
    pointer-events: auto;
    height: 1rem;

    &:focus-visible {
        outline: none;
        box-shadow:
            0px 0px 0px 2px ${theme.default.color.focus.light},
            0px 0px 0px 4px ${theme.default.color.focus.dark};
        border-radius: 100%;
    }

    ${({ $isClickable }) => $isClickable && `cursor: pointer`};
`;
const getArrowOverrides = () => {
    const arrowConfig = {
        top: ['bottom', '45deg'],
        right: ['left', '135deg'],
        bottom: ['top', '225deg'],
        left: ['right', '315deg'],
    };
    return Object.entries(arrowConfig)
        .map(([placement, value]) => `
        &.react-tooltip__place-${placement} {
            & .react-tooltip-arrow {
                ${value[0]}: -${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 0.6)} !important;
                transform: rotate(${value[1]});
            }
        }
    `)
        .join('');
};
const StyledReactTooltip = styledComponents.styled(reactTooltip.Tooltip) `
    --rt-opacity: 1;

    border: 1px solid ${theme.default.color.line.L02};
    padding: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.5)};
    text-align: center;
    font-size: ${theme.default.fontSize.default};
    line-height: ${theme.default.lineHeight.default};
    width: max-content;
    max-width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 25)};
    color: ${theme.default.color.text.black};
    background-color: ${theme.default.color.background.white.default};
    border-radius: ${theme.default.radius.s};

    ${common.default({ elevation: 'low' })}

    & .react-tooltip-arrow {
        width: ${styledUtils.getMultipliedSize(theme.default.base.baseWidth, 1.2)};
        height: ${styledUtils.getMultipliedSize(theme.default.base.baseHeight, 1.2)};
        border-bottom: 1px solid ${theme.default.color.line.L02};
        border-right: 1px solid ${theme.default.color.line.L02};
    }

    ${getArrowOverrides()}
`;
const Tooltip = (_a) => {
    var { 'data-testid': dataTestId, closeWithEsc = true, isClickable = false, isHoverable = false } = _a, props = tslib.__rest(_a, ['data-testid', "closeWithEsc", "isClickable", "isHoverable"]);
    const handleReactTooltipOpenEvents = {
        mouseover: !isClickable,
        focus: !isClickable,
        mouseenter: !isClickable,
        mousedown: !isClickable && !isHoverable,
        click: isClickable,
        dblclick: isClickable,
    };
    const handleReactTooltipCloseEvents = {
        mouseout: !isClickable && !isHoverable,
        blur: !isClickable && !isHoverable,
        mouseleave: !isClickable,
        mouseup: !isClickable,
        click: isClickable,
        dblclick: isClickable,
    };
    const handleReactTooltipGlobalCloseEvents = {
        escape: closeWithEsc,
        clickOutsideAnchor: true,
        scroll: true,
    };
    return (React__default.default.createElement(React__default.default.Fragment, null,
        !props.hideTriggerElement && (React__default.default.createElement(Helper, { "data-tooltip-id": props.id, "$isClickable": isClickable, className: props.className, "data-testid": dataTestId, type: "button", "data-tooltip-delay-hide": 500, "aria-describedby": props.id },
            React__default.default.createElement(Icon.default, { icon: icons.Info, size: "1rem", position: props.position, "aria-hidden": true }))),
        React__default.default.createElement(StyledReactTooltip, { id: props.id, place: props.placement, openOnClick: isClickable, clickable: isHoverable, "$isMultiline": props.isMultiline, disableStyleInjection: true, role: isHoverable ? 'dialog' : 'tooltip', openEvents: handleReactTooltipOpenEvents, globalCloseEvents: handleReactTooltipGlobalCloseEvents, closeEvents: handleReactTooltipCloseEvents, "data-testid": dataTestId && `${dataTestId}-content` }, props.children)));
};

exports.default = Tooltip;