@styleless-ui/react/Tooltip/Tooltip.js

Completely unstyled, headless and accessible React UI components.

"use strict";var __assign=this&&this.__assign||function(){return __assign=Object.assign||function(e){for(var t,n=1,r=arguments.length;n<r;n++)for(var o in t=arguments[n])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e},__assign.apply(this,arguments)},__createBinding=this&&this.__createBinding||(Object.create?function(e,t,n,r){void 0===r&&(r=n);var o=Object.getOwnPropertyDescriptor(t,n);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[n]}}),Object.defineProperty(e,r,o)}:function(e,t,n,r){void 0===r&&(r=n),e[r]=t[n]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var n in e)"default"!==n&&Object.prototype.hasOwnProperty.call(e,n)&&__createBinding(t,e,n);return __setModuleDefault(t,e),t},__rest=this&&this.__rest||function(e,t){var n={};for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(r=Object.getOwnPropertySymbols(e);o<r.length;o++)t.indexOf(r[o])<0&&Object.prototype.propertyIsEnumerable.call(e,r[o])&&(n[r[o]]=e[r[o]])}return n},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0});var jsx_runtime_1=require("react/jsx-runtime"),React=__importStar(require("react")),Popper_1=__importDefault(require("../Popper")),internals_1=require("../internals"),utils_1=require("../utils"),getExactAnchorElement=function(e){return"string"==typeof e?"undefined"!=typeof document?document.querySelector(e):null:"current"in e?e.current:e},TooltipBase=function(e,t){var n=e.children,r=e.className,o=e.anchorElement,l=e.defaultOpen,i=e.onOutsideClick,u=e.id,s=e.open,a=e.keepMounted,c=void 0!==a&&a,p=e.autoPlacement,f=void 0!==p&&p,_=e.placement,d=void 0===_?"top":_,m=e.behavior,h=void 0===m?"full-controlled":m,v=__rest(e,["children","className","anchorElement","defaultOpen","onOutsideClick","id","open","keepMounted","autoPlacement","placement","behavior"]);if(!o)throw new Error(["[StylelessUI][Tooltip]: Invalid `anchorElement` property.","The `anchorElement` property must be either a `valid query selector (string)`, `HTMLElement`, `RefObject<HTMLElement>`, or in shape of `{ getBoundingClientRect(): ClientRect }`"].join("\n"));if("full-controlled"!==h&&void 0!==s)throw new Error('[StylelessUI][Tooltip]: You are trying to control the `open` property while the `behavior` isn\'t `"full-controlled".`');var y=(0,utils_1.useDeterministicId)(u,"styleless-ui__tooltip"),g=React.useRef(null),E=(0,utils_1.useForkedRefs)(t,g),b=(0,utils_1.useControlledProp)(s,l,!1),O=b[0],T=b[1],w=React.useState((function(){return getExactAnchorElement(o)})),j=w[0],M=w[1],k=React.useState({x:0,y:0}),x=k[0],P=k[1],R=React.useRef(null),L=(0,utils_1.useEventCallback)((function(e){e.target&&j&&j!==e.target&&g.current&&g.current!==e.target&&j instanceof HTMLElement&&((0,utils_1.contains)(j,e.target)||(0,utils_1.contains)(g.current,e.target)||null==i||i(e))}));if(React.useEffect((function(){M(getExactAnchorElement(o))}),[o]),"undefined"!=typeof document){var C=React.useMemo((function(){return(0,utils_1.isHTMLElement)(j)?j:null}),[j]);(0,utils_1.useEventListener)({target:C,eventType:"click",handler:(0,utils_1.useEventCallback)((function(){T(!O)}))},(0,utils_1.isHTMLElement)(j)&&"open-on-click"===h),(0,utils_1.useEventListener)({target:C,eventType:"mouseenter",handler:(0,utils_1.useEventCallback)((function(){T(!0)}))},(0,utils_1.isHTMLElement)(j)&&["open-on-hover","follow-mouse"].includes(h)),(0,utils_1.useEventListener)({target:C,eventType:"mouseleave",handler:(0,utils_1.useEventCallback)((function(){T(!1)}))},(0,utils_1.isHTMLElement)(j)&&["open-on-hover","follow-mouse"].includes(h)),(0,utils_1.useEventListener)({target:C,eventType:"mousemove",handler:(0,utils_1.useEventCallback)((function(e){var t;P({x:e.clientX,y:e.clientY}),null===(t=R.current)||void 0===t||t.recompute()}))},(0,utils_1.isHTMLElement)(j)&&"follow-mouse"===h),(0,utils_1.useEventListener)({target:document,eventType:"click",handler:L,options:{capture:!0}},O&&!!i),(0,utils_1.useEventListener)({target:document,eventType:"keyup",handler:(0,utils_1.useEventCallback)((function(e){e.key===internals_1.SystemKeys.ESCAPE&&T(!1)}))},O&&"open-on-click"===h)}return(0,jsx_runtime_1.jsx)(Popper_1.default,__assign({},v,{id:y,role:"tooltip",open:O,ref:E,side:d,actions:R,className:r,keepMounted:c,autoPlacement:"follow-mouse"!==h&&f,offset:"follow-mouse"===h?32:void 0,anchorElement:"follow-mouse"===h?{getBoundingClientRect:function(){return{width:0,height:0,x:x.x,y:x.y,top:x.y,left:x.x,right:x.x,bottom:x.y}}}:o},{children:n}))},Tooltip=(0,utils_1.componentWithForwardedRef)(TooltipBase);exports.default=Tooltip;