@jengaui/tooltip
Version:
Jenga UI Tooltip component in React
23 lines (16 loc) • 2.54 kB
JavaScript
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var u = require('react');
var utils$1 = require('@react-spectrum/utils');
var tooltip = require('@react-aria/tooltip');
var v = require('styled-components');
var utils = require('@jengaui/utils');
var tastycss = require('tastycss');
var jsxRuntime = require('react/jsx-runtime');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var u__default = /*#__PURE__*/_interopDefaultLegacy(u);
var v__default = /*#__PURE__*/_interopDefaultLegacy(v);
var l=u__default["default"].createContext({});var L=tastycss.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"}}}),D=tastycss.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)"}}}),k=v__default["default"](L)`
${t=>utils.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 I(t,n){let{ref:a,arrowProps:m,state:s,overlayProps:p,minOffset:e,minScale:o,...f}=u.useContext(l),c=u.useRef(null),d=a??c;t=utils.mergeProps(t,f);let{placement:i="top",isOpen:x,tipStyles:T,showIcon:J,isMaterial:y,...P}=t,b=tastycss.extractStyles(P,tastycss.CONTAINER_STYLES),{tooltipProps:g}=tooltip.useTooltip(t,s);return u.useImperativeHandle(n,()=>utils$1.createDOMRef(d)),typeof e=="number"&&(e=`${e}px`),typeof o=="number"&&(o=String(o)),jsxRuntime.jsxs(k,{...g,...p,ref:a,styles:b,mods:{open:x,material:y},"data-min-offset":e,"data-min-slale":o,"data-placement":i,children:[t.children,jsxRuntime.jsx(D,{"data-placement":i,styles:T,...m})]})}var tt=u.forwardRef(I);
exports.Tooltip = tt;