UNPKG

@jengaui/tooltip

Version:

Jenga UI Tooltip component in React

15 lines (12 loc) 1.88 kB
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 };