@workday/canvas-kit-react/dist/commonjs/tooltip/lib/TooltipContainer.js

The parent module that contains all Workday Canvas Kit React components

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TooltipContainer = void 0;
const react_1 = require("@emotion/react");
const styled_1 = __importDefault(require("@emotion/styled"));
const tokens_1 = require("@workday/canvas-kit-react/tokens");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const tooltipAnimation = (transformOrigin) => {
    const translate = (0, common_1.getTranslateFromOrigin)(transformOrigin, tokens_1.space.xxxs);
    return (0, react_1.keyframes) `
    0% {
      opacity: 0;
      transform: translate(${translate.x}px, ${translate.y}px);
    }
    100% {
      opacity: 1;
      transform: translate(0);
    }
  `;
};
const defaultTransformOrigin = {
    vertical: 'bottom',
    horizontal: 'center',
};
exports.TooltipContainer = (0, styled_1.default)('div')({
    ...tokens_1.type.levels.subtext.medium,
    display: 'inline-flex',
    position: 'relative',
    padding: tokens_1.space.xs,
    color: tokens_1.colors.frenchVanilla100,
    a: {
        color: tokens_1.colors.frenchVanilla100,
        textDecoration: 'underline',
    },
    // use :before vs margin to increase the tooltip hit-box
    ':before': {
        content: '""',
        borderRadius: tokens_1.borderRadius.m,
        outline: `${(0, canvas_kit_styling_1.px2rem)(1)} solid transparent`,
        outlineOffset: `-${(0, canvas_kit_styling_1.px2rem)(1)}`,
        zIndex: -1,
        margin: tokens_1.space.xxxs,
        backgroundColor: 'rgba(0,0,0,.85)',
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
    // offset tooltips by 2 pixels when a keyboard focus ring is detected
    '[data-whatinput=keyboard] &': {
        padding: `calc(${tokens_1.space.s} - 0.125rem)`,
        ':before': {
            margin: `calc(${tokens_1.space.xxxs} + 0.125rem)`,
        },
    },
    // Hide tooltip when the reference element is either clipped or fully hidden
    '[data-popper-reference-hidden] &': {
        visibility: 'hidden',
        pointerEvents: 'none',
    },
    // Fix offsets based on placement
    '[data-popper-placement="top-start"] &, [data-popper-placement="bottom-start"] &': {
        left: `-${tokens_1.space.xxxs}`,
    },
    '[data-popper-placement="top-end"] &, [data-popper-placement="bottom-end"] &': {
        right: `-${tokens_1.space.xxxs}`,
    },
    '[data-popper-placement="left-start"] &, [data-popper-placement="right-start"] &': {
        top: `-${tokens_1.space.xxxs}`,
    },
    '[data-popper-placement="left-end"] &, [data-popper-placement="right-end"] &': {
        bottom: `-${tokens_1.space.xxxs}`,
    },
}, ({ transformOrigin = defaultTransformOrigin }) => {
    if (transformOrigin === null) {
        return {};
    }
    return {
        animation: tooltipAnimation(transformOrigin),
        animationDuration: '150ms',
        animationTimingFunction: 'ease-out',
        transformOrigin: transformOrigin
            ? `${transformOrigin.vertical} ${transformOrigin.horizontal}`
            : 'top center',
    };
});