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

The parent module that contains all Workday Canvas Kit React components

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TooltipContainer = exports.tooltipContainerStencil = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const common_1 = require("@workday/canvas-kit-react/common");
const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
const layout_1 = require("@workday/canvas-kit-react/layout");
const defaultTransformOrigin = {
    vertical: 'bottom',
    horizontal: 'center',
};
const tooltipTranslateVars = (0, canvas_kit_styling_1.createVars)({ id: "9bc811", args: ["positionX", "positionY"] });
/**
 * Keyframe for the Tooltip animation.
 */
const tooltipAnimation = (0, canvas_kit_styling_1.keyframes)({ name: "19awr", styles: "0%{opacity:0;transform:translate(var(--positionX-9bc811), var(--positionY-9bc811));}100%{opacity:1;transform:translate(0);}" });
exports.tooltipContainerStencil = (0, canvas_kit_styling_1.createStencil)({
    vars: {
        tooltipTransformOriginHorizontal: '',
        tooltipTransformOriginVertical: '',
    },
    base: { name: "1kh09c", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default);font-weight:var(--cnvs-sys-font-weight-normal);line-height:var(--cnvs-sys-line-height-subtext-medium);font-size:var(--cnvs-sys-font-size-subtext-medium);letter-spacing:var(--cnvs-base-letter-spacing-100);display:inline-flex;position:relative;padding:var(--cnvs-sys-space-x3);color:var(--cnvs-sys-color-text-inverse);animation-name:animation-19awr;animation-duration:150ms;animation-timing-function:ease-out;transform-origin:var(--tooltipTransformOriginVertical-tooltip-container-6c30a8) var(--tooltipTransformOriginHorizontal-tooltip-container-6c30a8);a{color:var(--cnvs-sys-color-text-inverse);text-decoration:underline;}&:before{content:\"\";border-radius:var(--cnvs-sys-shape-x1);outline:0.0625rem solid transparent;outline-offset:-0.0625rem;z-index:-1;margin:var(--cnvs-sys-space-x1);background-color:var(--cnvs-sys-color-bg-translucent);position:absolute;top:0;left:0;right:0;bottom:0;}body:has(:focus-visible, .focus) &{padding:calc(var(--cnvs-sys-space-x4) - calc(var(--cnvs-sys-space-x1) / 2));&:before{margin:calc(var(--cnvs-sys-space-x1) + calc(var(--cnvs-sys-space-x1) / 2));}}[data-popper-reference-hidden] &{visibility:hidden;pointer-events:none;}[data-popper-placement=\"top-start\"] &, [data-popper-placement=\"bottom-start\"] &{left:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"top-end\"] &, [data-popper-placement=\"bottom-end\"] &{right:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-start\"] &, [data-popper-placement=\"right-start\"] &{top:calc(var(--cnvs-sys-space-x1) * -1);}[data-popper-placement=\"left-end\"] &, [data-popper-placement=\"right-end\"] &{bottom:calc(var(--cnvs-sys-space-x1) * -1);}" }
}, "tooltip-container-6c30a8");
exports.TooltipContainer = (0, common_1.createComponent)('div')({
    displayName: 'TooltipContainer',
    Component: ({ children, transformOrigin = defaultTransformOrigin, ...elemProps }, ref, Element) => {
        const translate = (0, common_1.getTransformOrigin)(transformOrigin || defaultTransformOrigin, (0, canvas_kit_styling_1.cssVar)(canvas_tokens_web_1.system.space.x2));
        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, ...(0, layout_1.mergeStyles)(elemProps, [
                (0, exports.tooltipContainerStencil)({
                    tooltipTransformOriginHorizontal: transformOrigin === null || transformOrigin === void 0 ? void 0 : transformOrigin.horizontal,
                    tooltipTransformOriginVertical: transformOrigin === null || transformOrigin === void 0 ? void 0 : transformOrigin.vertical,
                }),
                tooltipTranslateVars({ positionX: translate.x, positionY: translate.y }),
            ]), children: children }));
    },
});