@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
35 lines (34 loc) • 3.62 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { createComponent, getTransformOrigin, } from '@workday/canvas-kit-react/common';
import { calc, createStencil, createVars, cssVar, keyframes, px2rem, } from '@workday/canvas-kit-styling';
import { system } from '@workday/canvas-tokens-web';
import { mergeStyles } from '@workday/canvas-kit-react/layout';
const defaultTransformOrigin = {
vertical: 'bottom',
horizontal: 'center',
};
const tooltipTranslateVars = createVars({ id: "9bc811", args: ["positionX", "positionY"] });
/**
* Keyframe for the Tooltip animation.
*/
const tooltipAnimation = keyframes({ name: "2hixyb", styles: "0%{opacity:0;transform:translate(var(--positionX-9bc811), var(--positionY-9bc811));}100%{opacity:1;transform:translate(0);}" });
export const tooltipContainerStencil = createStencil({
vars: {
tooltipTransformOriginHorizontal: '',
tooltipTransformOriginVertical: '',
},
base: { name: "334ivg", 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-2hixyb;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");
export const TooltipContainer = createComponent('div')({
displayName: 'TooltipContainer',
Component: ({ children, transformOrigin = defaultTransformOrigin, ...elemProps }, ref, Element) => {
const translate = getTransformOrigin(transformOrigin || defaultTransformOrigin, cssVar(system.space.x2));
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,
}),
tooltipTranslateVars({ positionX: translate.x, positionY: translate.y }),
]), children: children }));
},
});