@jengaui/tooltip
Version:
Jenga UI Tooltip component in React
15 lines (12 loc) • 2.23 kB
JavaScript
import { a } from './chunk-RP3EJZRM.js';
import { forwardRef, useContext, useRef, useImperativeHandle } from 'react';
import { createDOMRef } from '@react-spectrum/utils';
import { useTooltip } from '@react-aria/tooltip';
import E from 'styled-components';
import { getOverlayTransitionCSS, mergeProps } from '@jengaui/utils';
import { tasty, extractStyles, CONTAINER_STYLES } from 'tastycss';
import { jsxs, jsx } from 'react/jsx-runtime';
var D=tasty({styles:{display:"block",fill:"#dark.85",color:"#white",width:"initial 36x max-content",radius:!0,padding:".75x 1x",preset:"t3",backdropFilter:"blur(.5x)",whiteSpace:"pre-line",pointerEvents:{"":"none",material:"auto"}}}),k=tasty({styles:{position:"absolute",width:"1px",height:"1px",border:".5x #clear",borderTop:".5x solid #dark.85",borderBottom:"0",top:{"":"initial",'[data-placement="left"] | [data-placement="right"]':"50%",'[data-placement="top"]':"100%"},left:{"":"initial",'[data-placement="top"] | [data-placement="bottom"]':"50%",'[data-placement="left"]':"100%"},right:{"":"initial",'[data-placement="right"]':"100%"},bottom:{"":"initial",'[data-placement="bottom"]':"100%"},transform:{"":"translate((-.375x - 1px), 0)",'[data-placement="bottom"]':"translate((-.375x - 1px), 0) rotate(180deg)",'[data-placement="left"]':"translate(-.375x, (-.375x - 1px)) rotate(270deg)",'[data-placement="right"]':"translate(.375x, (-.375x - 1px)) rotate(90deg)"}}}),I=E(D)`
${t=>getOverlayTransitionCSS({placement:t==null?void 0:t["data-position"],minOffset:t==null?void 0:t["data-min-offset"],minScale:t==null?void 0:t["data-min-scale"]})}
`;function B(t,n){let{ref:o,arrowProps:m,state:s,overlayProps:p,minOffset:e,minScale:a$1,...d}=useContext(a),f=useRef(null),c=o??f;t=mergeProps(t,d);let{placement:l="top",isOpen:x,tipStyles:y,showIcon:L,isMaterial:T,...u}=t,P=extractStyles(u,CONTAINER_STYLES),{tooltipProps:S}=useTooltip(t,s);return useImperativeHandle(n,()=>createDOMRef(c)),typeof e=="number"&&(e=`${e}px`),typeof a$1=="number"&&(a$1=String(a$1)),jsxs(I,{...S,...p,ref:o,styles:P,mods:{open:x,material:T},"data-min-offset":e,"data-min-slale":a$1,"data-placement":l,children:[t.children,jsx(k,{"data-placement":l,styles:y,...m})]})}var U=forwardRef(B);
export { U as a };