koval-ui/dist/src/lib/Tooltip/Tooltip.cjs

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),s=require("react"),i=require("classnames"),r=require("@floating-ui/react-dom"),h=require("css-vars-hook"),O=require("../../internal/Portal/Portal.cjs"),S=require("../../internal/hooks/useDismiss.cjs"),E=require("../../internal/hooks/useFocusTrap.cjs"),k=require("./Arrow.cjs"),l=require("./Tooltip.module.css.cjs"),q=s.forwardRef(({children:w,className:x,isOpen:c=!1,content:j,referenceClassName:T,onToggle:n=()=>{},interactive:u=!0,placement:R="bottom",...g},y)=>{var m,p;const[t,o]=s.useState(c);s.useEffect(()=>{o(c)},[c,o]),s.useEffect(()=>{n(t)},[t,n]);const f=s.useRef(null),{refs:a,floatingStyles:N,middlewareData:d,placement:b}=r.useFloating({strategy:"fixed",placement:R,whileElementsMounted:r.autoUpdate,middleware:[r.offset(18),r.flip(),r.arrow({element:f})]}),{LocalRoot:D}=h.useLocalTheme(),{getTheme:F}=h.useRootTheme(),v=s.useCallback(()=>{o(!1)},[o]);return S.useDismiss(v,a.reference,t),E.useFocusTrap(a.floating.current,t,u),e.jsxs(s.Fragment,{children:[e.jsx("div",{ref:a.setReference,className:i(l.default.reference,T),children:w}),t&&e.jsx(O.Portal,{children:e.jsx("div",{ref:a.setFloating,style:N,className:i({[l.default.unfocusable]:!u}),children:e.jsx(D,{className:l.default.provider,theme:F(),children:e.jsxs("div",{...g,ref:y,className:i(l.default.tooltip,x),children:[e.jsx(k.Arrow,{ref:f,placement:b,left:(m=d.arrow)==null?void 0:m.x,top:(p=d.arrow)==null?void 0:p.y}),j]})})})})]})});q.displayName="Tooltip";exports.Tooltip=q;
//# sourceMappingURL=Tooltip.cjs.map