@jengaui/tooltip/dist/index.js

Jenga UI Tooltip component in React

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var F = require('react');
var utils$1 = require('@react-spectrum/utils');
var tooltip = require('@react-aria/tooltip');
var U = require('styled-components');
var utils = require('@jengaui/utils');
var tastycss = require('tastycss');
var jsxRuntime = require('react/jsx-runtime');
var focus = require('@react-aria/focus');
var overlays = require('@react-aria/overlays');
var tooltip$1 = require('@react-stately/tooltip');
var overlays$1 = require('@jengaui/overlays');
var activeZone = require('@jengaui/active-zone');
var core = require('@jengaui/core');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var F__default = /*#__PURE__*/_interopDefaultLegacy(F);
var U__default = /*#__PURE__*/_interopDefaultLegacy(U);

var g=F__default["default"].createContext({});var V=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"}}}),$=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=U__default["default"](V)`
  ${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 Y(t,a){let{ref:r,arrowProps:n,state:i,overlayProps:p,minOffset:e,minScale:o,...c}=F.useContext(g),P=F.useRef(null),u=r??P;t=utils.mergeProps(t,c);let{placement:f="top",isOpen:l,tipStyles:y,showIcon:s,isMaterial:m,...d}=t,x=tastycss.extractStyles(d,tastycss.CONTAINER_STYLES),{tooltipProps:b}=tooltip.useTooltip(t,i);return F.useImperativeHandle(a,()=>utils$1.createDOMRef(u)),typeof e=="number"&&(e=`${e}px`),typeof o=="number"&&(o=String(o)),jsxRuntime.jsxs(K,{...b,...p,ref:r,styles:x,mods:{open:l,material:m},"data-min-offset":e,"data-min-slale":o,"data-placement":f,children:[t.children,jsxRuntime.jsx($,{"data-placement":f,styles:y,...n})]})}var O=F.forwardRef(Y);var it=8,lt=0;function at(t){let{children:a,activeWrap:r,crossOffset:n=lt,isDisabled:i,isMaterial:p,offset:e=it,trigger:o,delay:c=250,isOpen:P,onOpenChange:u,defaultOpen:f}=t,[l,y]=F.Children.toArray(a),s=tooltip$1.useTooltipTriggerState({delay:c,...t}),m=F.useRef(null),d=F.useRef(null),{triggerProps:x,tooltipProps:b}=tooltip.useTooltipTrigger({isDisabled:i,trigger:o,delay:c,isOpen:P,onOpenChange:u,defaultOpen:f},s,m),{overlayProps:w,arrowProps:C,placement:M}=overlays.useOverlayPosition({placement:t.placement||"top",targetRef:m,overlayRef:d,offset:e,crossOffset:n,isOpen:s.isOpen});if(!r&&typeof l=="string")return console.warn("JengaUIKit: Tooltips are only supported on elements that are both focusable and hoverable. To solve this issue you can: 1) Use active element as a trigger (`Button`, `Link`, etc); 2) Use `activeWrap` attribute to automatically wrap the content; 3) Use `ActiveZone` component to manually wrap the content."),jsxRuntime.jsx(core.Block,{children:l});function J(v){var h;(h=v==null?void 0:v.currentTarget)==null||h.parentNode.click();}return jsxRuntime.jsxs(focus.FocusableProvider,{...x,ref:m,children:[r?jsxRuntime.jsx(activeZone.ActiveZone,{onClick:J,children:l}):l,jsxRuntime.jsx(g.Provider,{value:{state:s,placement:M,ref:d,overlayProps:w,arrowProps:C,minOffset:"var(--gap)",minScale:"1",isMaterial:p,...b},children:jsxRuntime.jsx(overlays$1.OverlayWrapper,{isOpen:s.isOpen,placement:t.placement||"top",children:y})})]})}var A=at;function mt(t){let[a,r]=F.useState(!1),{title:n,children:i,tooltipStyles:p,width:e,...o}=t;return F.useEffect(()=>{r(!0);},[]),a?jsxRuntime.jsxs(A,{...o,children:[i,jsxRuntime.jsx(O,{styles:p,...e?{width:e}:null,children:n})]}):jsxRuntime.jsx(jsxRuntime.Fragment,{children:i})}var qt=mt;

exports.Tooltip = O;
exports.TooltipContext = g;
exports.TooltipProvider = qt;
exports.TooltipTrigger = A;