@jengaui/tooltip
Version:
Jenga UI Tooltip component in React
15 lines (12 loc) • 1.88 kB
JavaScript
import { a } from './chunk-RP3EJZRM.js';
import { FocusableProvider } from '@react-aria/focus';
import { Children, useRef } from 'react';
import { useOverlayPosition } from '@react-aria/overlays';
import { useTooltipTrigger } from '@react-aria/tooltip';
import { useTooltipTriggerState } from '@react-stately/tooltip';
import { OverlayWrapper } from '@jengaui/overlays';
import { ActiveZone } from '@jengaui/active-zone';
import { Block } from '@jengaui/core';
import { jsx, jsxs } from 'react/jsx-runtime';
var D=8,J=0;function L(e){let{children:m,activeWrap:n,crossOffset:f=J,isDisabled:T,isMaterial:u,offset:v=D,trigger:O,delay:a$1=250,isOpen:d,onOpenChange:y,defaultOpen:P}=e,[t,b]=Children.toArray(m),o=useTooltipTriggerState({delay:a$1,...e}),i=useRef(null),p=useRef(null),{triggerProps:h,tooltipProps:F}=useTooltipTrigger({isDisabled:T,trigger:O,delay:a$1,isOpen:d,onOpenChange:y,defaultOpen:P},o,i),{overlayProps:R,arrowProps:A,placement:C}=useOverlayPosition({placement:e.placement||"top",targetRef:i,overlayRef:p,offset:v,crossOffset:f,isOpen:o.isOpen});if(!n&&typeof t=="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."),jsx(Block,{children:t});function E(l){var s;(s=l==null?void 0:l.currentTarget)==null||s.parentNode.click();}return jsxs(FocusableProvider,{...h,ref:i,children:[n?jsx(ActiveZone,{onClick:E,children:t}):t,jsx(a.Provider,{value:{state:o,placement:C,ref:p,overlayProps:R,arrowProps:A,minOffset:"var(--gap)",minScale:"1",isMaterial:u,...F},children:jsx(OverlayWrapper,{isOpen:o.isOpen,placement:e.placement||"top",children:b})})]})}var X=L;
export { X as a };