carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 4.32 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),r=require("invariant"),o=require("@floating-ui/react-dom"),n=require("./tooltip.style.js"),l=require("./tooltip-pointer.style.js"),i=require("./tooltip.config.js"),s=require("../../__internal__/utils/helpers/tags/tags.js"),u=require("../portal/portal.js");function a(e){return e&&e.__esModule?e:{default:e}}var c=a(t),f=a(r);function p(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function d(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{},o=Object.keys(r);"function"==typeof Object.getOwnPropertySymbols&&(o=o.concat(Object.getOwnPropertySymbols(r).filter((function(e){return Object.getOwnPropertyDescriptor(r,e).enumerable})))),o.forEach((function(t){p(e,t,r[t])}))}return e}function b(e,t){return t=null!=t?t:{},Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(t)):function(e){var t=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t.push.apply(t,r)}return t}(Object(t)).forEach((function(r){Object.defineProperty(e,r,Object.getOwnPropertyDescriptor(t,r))})),e}function m(e,t){e&&("function"==typeof e&&e(t),"object"==typeof e&&"current"in e&&(e.current=t))}const y=c.default.forwardRef(((r,a)=>{var{children:p,isVisible:y,position:O="top",message:g,type:j,size:v="medium",isPartOfInput:h,inputSize:w="medium",id:P,bgColor:x,fontColor:C,flipOverrides:S,target:k}=r,E=function(e,t){if(null==e)return{};var r,o,n=function(e,t){if(null==e)return{};var r,o,n={},l=Object.keys(e);for(o=0;o<l.length;o++)r=l[o],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(o=0;o<l.length;o++)r=l[o],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}(r,["children","isVisible","position","message","type","size","isPartOfInput","inputSize","id","bgColor","fontColor","flipOverrides","target"]);const T=t.useRef(null),q=void 0!==y,[_,I]=t.useState(!1);let R=_;q&&(R=y);const z=t.useRef(void 0),D=t.useRef(void 0);t.useEffect((()=>()=>{clearTimeout(z.current),clearTimeout(D.current)}),[]);const A=t.useCallback((()=>I(!0)),[]),M=t.useCallback((()=>I(!1)),[]),L=t.useCallback((()=>{z.current=window.setTimeout(A,100)}),[A]),F=t.useCallback((()=>{D.current=window.setTimeout(M,100)}),[M]);t.useEffect((()=>{const e={mouseenter:L,mouseleave:F,focus:A,blur:M},t=k||T.current;return q||Object.entries(e).forEach((([e,r])=>{null==t||t.addEventListener(e,r)})),()=>{q||Object.entries(e).forEach((([e,r])=>{null==t||t.removeEventListener(e,r)}))}}),[p,A,L,M,F,q,k]);const N=t.useRef(S);N.current=S;const V=t.useRef(null),U=t.useCallback((e=>{let t=9;return h&&(t={small:5,medium:["top","bottom"].includes(e)?6:8,large:["top","bottom"].includes(e)?10:12}[w]),t}),[w,h]),B=t.useMemo((()=>[o.offset((({placement:e})=>({mainAxis:U(e)}))),o.flip({fallbackPlacements:N.current}),o.shift({padding:5,limiter:o.limitShift({offset:({rects:e})=>({mainAxis:e.reference.height})})}),o.arrow({element:V})]),[U,V]),{x:G,y:H,reference:J,floating:K,strategy:Q,placement:W,middlewareData:X}=o.useFloating({placement:O,middleware:B,whileElementsMounted:o.autoUpdate}),Y={position:Q,top:null!=H?H:0,left:null!=G?G:0},Z=t.useCallback((e=>{J(k||e),T.current=e,m(p.ref,e)}),[J,p,k]),$=t.useCallback((e=>{K(e),m(a,e)}),[K,a]),ee={top:"bottom",right:"left",bottom:"top",left:"right"}[W.split("-")[0]],{x:te,y:re}=X.arrow||{},oe={left:te,top:re,[ee]:"-6px"},ne=!S||Array.isArray(S)&&S.every((e=>i.TOOLTIP_POSITIONS.includes(e)));return f.default(ne,'The flipOverrides prop supplied to Tooltip must be an array containing some or all of ["top", "bottom", "left", "right"].'),e.jsxs(e.Fragment,{children:[c.default.cloneElement(p,{ref:Z}),R?e.jsx(u.Portal,{children:e.jsxs(n.default,b(d({"data-element":"tooltip","data-role":"tooltip",role:"tooltip",tabIndex:-1,type:j,size:v,id:P},s.default("tooltip",E)),{ref:$,bgColor:x,fontColor:C,style:Y,"data-placement":W,children:[e.jsx(l.default,{type:j,ref:V,"data-element":"tooltip-pointer","data-role":"tooltip-pointer",bgColor:x,style:oe}),g]}))}):null]})}));y.displayName="Tooltip",exports.Tooltip=y,exports.default=y;