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

The parent module that contains all Workday Canvas Kit React components

import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent, getTransformOrigin, } from '@workday/canvas-kit-react/common';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
import { calc, createStencil, createVars, cssVar, keyframes, px2rem, } from '@workday/canvas-kit-styling';
import { base, system } from '@workday/canvas-tokens-web';
const defaultTransformOrigin = {
    vertical: 'bottom',
    horizontal: 'center',
};
const tooltipTranslateVars = createVars({ id: "3e3693", args: ["positionX", "positionY"] });
/**
 * Keyframe for the Tooltip animation.
 */
const tooltipAnimation = keyframes({ name: "453l5y", styles: "0%{opacity:0;transform:translate(var(--positionX-3e3693), var(--positionY-3e3693));}100%{opacity:1;transform:translate(0);}" });
export const tooltipContainerStencil = createStencil({
    vars: {
        tooltipTransformOriginHorizontal: '',
        tooltipTransformOriginVertical: '',
        background: '',
    },
    base: { name: "21hfle", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default, \"Roboto\");font-weight:var(--cnvs-sys-font-weight-normal, 400);line-height:var(--cnvs-sys-line-height-subtext-lg, 1.25rem);font-size:var(--cnvs-sys-font-size-subtext-lg, 0.875rem);letter-spacing:var(--cnvs-sys-letter-spacing-subtext-lg, 0.015rem);display:inline-flex;position:relative;padding:0.375rem var(--cnvs-sys-padding-sm, var(--cnvs-sys-space-x3, 0.75rem));color:var(--cnvs-sys-color-fg-default);animation-name:animation-453l5y;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-3eb75c) var(--tooltipTransformOriginHorizontal-tooltip-container-3eb75c);margin:var(--cnvs-sys-gap-xs, var(--cnvs-sys-space-x1, 0.25rem));a{color:var(--cnvs-sys-color-fg-default);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-full, var(--cnvs-sys-shape-round, 65rem));border:0.0625rem solid var(--cnvs-sys-color-border-default);z-index:-1;margin:0;background:var(--background-tooltip-container-3eb75c, var(--cnvs-sys-color-surface-default, var(--cnvs-sys-color-bg-default, oklch(1 0 0 / 1))));position:absolute;top:0;left:0;right:0;bottom:0;box-shadow:var(--cnvs-sys-depth-3);}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-base-size-50, 0.25rem) * -1);}@media (forced-colors: active){outline:0.0625rem solid CanvasText;}" },
    modifiers: {
        elementHasFocus: {
            true: { name: "2kdje6", styles: "margin:0.375rem;" }
        },
        variant: {
            alt: { name: "2efbv4", styles: "&:before{background:var(--background-tooltip-container-3eb75c, var(--cnvs-sys-color-surface-elevated, linear-gradient(0deg, oklch(1 0 89.88 / 0.374) 0%, oklch(1 0 89.88 / 0.374) 100%), linear-gradient(0deg, oklch(0 0 0 / 0.0196) 0%, oklch(0 0 0 / 0.0196) 100%), oklch(1 0 0 / 1)));border:0.0625rem solid var(--cnvs-sys-color-border-elevated, oklch(1 0 0 / 1));}" }
        }
    }
}, "tooltip-container-3eb75c");
export const TooltipContainer = createComponent('div')({
    displayName: 'TooltipContainer',
    Component: ({ children, transformOrigin = defaultTransformOrigin, elementHasFocus = false, variant, ...elemProps }, ref, Element) => {
        const translate = getTransformOrigin(transformOrigin || defaultTransformOrigin, system.legacy.gap.sm);
        return (_jsx(Element, { ref: ref, ...mergeStyles(elemProps, [
                tooltipContainerStencil({
                    tooltipTransformOriginHorizontal: transformOrigin === null || transformOrigin === void 0 ? void 0 : transformOrigin.horizontal,
                    tooltipTransformOriginVertical: transformOrigin === null || transformOrigin === void 0 ? void 0 : transformOrigin.vertical,
                    elementHasFocus,
                    variant,
                }),
                tooltipTranslateVars({ positionX: translate.x, positionY: translate.y }),
            ]), children: children }));
    },
});