Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@leafygreen-ui/tooltip
Advanced tools
@leafygreen-ui/tooltip - npm Package Compare versions
Comparing version 6.1.9 to 6.2.0
| # @leafygreen-ui/tooltip | ||
| ## 6.2.0 | ||
| ### Minor Changes | ||
| - 857a680a: Adds support for positioning popover elements relative to elements within a scroll container other than the window. | ||
| Adds support for setting z-index on popover elements with the `zIndex` prop. | ||
| ### Patch Changes | ||
| - Updated dependencies [857a680a] | ||
| - @leafygreen-ui/popover@7.2.0 | ||
| ## 6.1.9 | ||
@@ -4,0 +16,0 @@ |
@@ -1,2 +0,2 @@ | ||
| import t,{useState as n,useMemo as e,useEffect as r,useCallback as o}from"react";import i from"prop-types";import{transparentize as a}from"polished";import c from"lodash/debounce";import l,{Justify as u,Align as p}from"@leafygreen-ui/popover";export{Justify}from"@leafygreen-ui/popover";import{useEscapeKey as f,useEventListener as s}from"@leafygreen-ui/hooks";import{css as d,cx as g}from"@leafygreen-ui/emotion";import{uiColors as m}from"@leafygreen-ui/palette";import{fontFamilies as b}from"@leafygreen-ui/tokens";import{IdAllocator as h,isComponentType as y}from"@leafygreen-ui/lib";import{useBaseFontSize as v}from"@leafygreen-ui/leafygreen-provider";import{isComponentGlyph as x}from"@leafygreen-ui/icon";import O from"lodash/clamp";function k(t,n,e){return n in t?Object.defineProperty(t,n,{value:e,enumerable:!0,configurable:!0,writable:!0}):t[n]=e,t}function j(){return(j=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var e=arguments[n];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(t[r]=e[r])}return t}).apply(this,arguments)}function w(t,n){var e=Object.keys(t);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(t);n&&(r=r.filter((function(n){return Object.getOwnPropertyDescriptor(t,n).enumerable}))),e.push.apply(e,r)}return e}function P(t){for(var n=1;n<arguments.length;n++){var e=null!=arguments[n]?arguments[n]:{};n%2?w(Object(e),!0).forEach((function(n){k(t,n,e[n])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(e)):w(Object(e)).forEach((function(n){Object.defineProperty(t,n,Object.getOwnPropertyDescriptor(e,n))}))}return t}function E(t,n){if(null==t)return{};var e,r,o=function(t,n){if(null==t)return{};var e,r,o={},i=Object.keys(t);for(r=0;r<i.length;r++)e=i[r],n.indexOf(e)>=0||(o[e]=t[e]);return o}(t,n);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(t);for(r=0;r<i.length;r++)e=i[r],n.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(t,e)&&(o[e]=t[e])}return o}function C(t,n){return n||(n=t.slice(0)),Object.freeze(Object.defineProperties(t,{raw:{value:Object.freeze(n)}}))}function N(t,n){return function(t){if(Array.isArray(t))return t}(t)||function(t,n){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(t)))return;var e=[],r=!0,o=!1,i=void 0;try{for(var a,c=t[Symbol.iterator]();!(r=(a=c.next()).done)&&(e.push(a.value),!n||e.length!==n);r=!0);}catch(t){o=!0,i=t}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return e}(t,n)||function(t,n){if(!t)return;if("string"==typeof t)return S(t,n);var e=Object.prototype.toString.call(t).slice(8,-1);"Object"===e&&t.constructor&&(e=t.constructor.name);if("Map"===e||"Set"===e)return Array.from(t);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return S(t,n)}(t,n)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function S(t,n){(null==n||n>t.length)&&(n=t.length);for(var e=0,r=new Array(n);e<n;e++)r[e]=t[e];return r}function M(){var t=C(["\n min-width: ","px;\n transform: ",";\n "]);return M=function(){return t},t}function T(){var t=C(["\n ",";\n position: absolute;\n transform: rotate(45deg);\n width: ","px;\n height: ","px;\n margin: auto;\n "]);return T=function(){return t},t}function A(){var t=C(["\n position: absolute;\n width: ","px;\n height: ","px;\n overflow: hidden;\n margin: auto;\n pointer-events: none;\n ",";\n "]);return A=function(){return t},t}var I;function L(){var t=C(["\n background-color: ",";\n border: 1px solid ",";\n box-shadow: 2px 2px 4px ",";\n "]);return L=function(){return t},t}function z(){var t=C(["\n color: ",";\n "]);return z=function(){return t},t}function D(){var t=C(["\n background-color: ",";\n color: ",";\n border: 1px solid ",";\n "]);return D=function(){return t},t}function F(){var t=C(["\n background-color: ",";\n box-shadow: 2px 2px 4px ",";\n "]);return F=function(){return t},t}function H(){var t=C(["\n color: ",";\n "]);return H=function(){return t},t}function B(){var t=C(["\n background-color: ",";\n color: ",";\n "]);return B=function(){return t},t}function U(){var t=C(["\n position: relative;\n"]);return U=function(){return t},t}function G(){var t=C(["\n padding: 14px 16px;\n border-radius: 3px;\n box-shadow: 0px 2px 4px -1px ",";\n cursor: default;\n overflow-wrap: break-word;\n"]);return G=function(){return t},t}function R(){var t=C(["\n font-size: 16px;\n line-height: 24px;\n letter-spacing: 0px;\n"]);return R=function(){return t},t}function X(){var t=C(["\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0px;\n"]);return X=function(){return t},t}function Y(){var t=C(["\n margin: unset;\n font-family: ",";\n color: ",";\n font-weight: 400;\n"]);return Y=function(){return t},t}var J=d(Y(),b.default,m.gray.dark3),$=d(X()),q=d(R()),K={Hover:"hover",Click:"click"},Q="light",V="dark",W={Top:p.Top,Bottom:p.Bottom,Left:p.Left,Right:p.Right},Z=d(G(),a(.8,m.black)),_=d(U()),tt=(k(I={},V,{tooltip:d(B(),m.gray.dark3,m.gray.light1),children:d(H(),m.gray.light1),notch:d(F(),m.gray.dark3,a(.9,m.black))}),k(I,Q,{tooltip:d(D(),m.gray.light3,m.gray.dark2,m.gray.light2),children:d(z(),m.gray.dark2),notch:d(L(),m.gray.light3,m.gray.light2,a(.9,m.black))}),I),nt=h.create("tooltip"),et=function(t){t.stopPropagation()};function rt(i){var a=i.open,p=i.setOpen,m=i.className,b=i.children,h=i.trigger,k=i.triggerEvent,w=void 0===k?K.Hover:k,C=i.darkMode,S=void 0!==C&&C,I=i.enabled,L=void 0===I||I,z=i.usePortal,D=void 0===z||z,F=i.align,H=void 0===F?"top":F,B=i.justify,U=void 0===B?"start":B,G=i.spacing,R=void 0===G?12:G,X=i.id,Y=i.shouldClose,W=i.portalClassName,rt=E(i,["open","setOpen","className","children","trigger","triggerEvent","darkMode","enabled","usePortal","align","justify","spacing","id","shouldClose","portalClassName"]),ot="boolean"==typeof a,it=N(n(!1),2),at=it[0],ct=it[1],lt=v(),ut=ot?a:at,pt=ot&&p?p:ct,ft=N(n(null),2),st=ft[0],dt=ft[1],gt=N(n(null),2),mt=gt[0],bt=gt[1],ht=null!=X?X:null==st?void 0:st.id,yt=e((function(){return null!=ht?ht:nt.generate()}),[ht]);r((function(){(h&&y(h,"Icon")||x(h))&&console.warn("Using a LeafyGreenUI Icon or Glyph component as a trigger will not render a Tooltip, as these components do not render their children. To use, please wrap your trigger element in another HTML tag.")}),[h]);var vt=o((function(){("function"!=typeof Y||Y())&&pt(!1)}),[pt,Y]),xt=o((function(t,n){return t===K.Hover?{ref:bt,onMouseEnter:c((function(){pt(!0)}),35),onMouseLeave:c(vt,35),onFocus:function(){return pt(!0)},onBlur:vt}:n&&n.onClick?{onClick:function(t){t.target!==st&&(n.onClick(),pt((function(t){return!t})))}}:{ref:bt,onClick:function(t){t.target!==st&&pt((function(t){return!t}))}}}),[vt,pt,st]);f(vt,{enabled:ut});var Ot=o((function(t){st&&(h&&mt?st.contains(t.target)||mt.contains(t.target)||vt():st.contains(t.target)||vt())}),[vt,st,h,mt]);s("click",Ot,{enabled:ut&&"click"===w});var kt=D?{spacing:R,usePortal:D,portalClassName:W}:{spacing:R,usePortal:D},jt=S?V:Q,wt=L&&ut,Pt=t.createElement(l,j({key:"tooltip",active:wt,align:H,justify:U,adjustOnMutation:!0,onClick:et},kt),(function(n){var e=function(t,n,e){if(!t||!n||!e)return{notchContainer:"",notch:"",tooltip:""};var r,o,i={},a={},c=10,l=0,p="";switch(t){case"top":case"bottom":switch(c=15,r=e.width/2-10,l=O(r,5,c),o=r<=5,i.left="0px",i.right="0px","top"===t?(a.top="calc(100% - 1px)",i.top="".concat(-5,"px")):(a.bottom="calc(100% - 1px)",i.bottom="".concat(-5,"px")),n){case u.Start:a.left="".concat(l,"px"),o&&(p="translateX(-".concat(5-r,"px)"));break;case u.Middle:case u.Fit:a.left="0px",a.right="0px";break;case u.End:a.right="".concat(l,"px"),o&&(p="translateX(".concat(5-r,"px)"))}break;case"left":case"right":switch(c=10,r=e.height/2-10,l=O(r,5,c),o=r<=5,i.top="0px",i.bottom="0px","left"===t?(i.left="".concat(-5,"px"),a.left="100%"):(i.right="".concat(-5,"px"),a.right="100%"),n){case u.Start:a.top="".concat(l,"px"),o&&(p="translateY(-".concat(5-r,"px)"));break;case u.Middle:case u.Fit:a.top="0px",a.bottom="0px";break;case u.End:a.bottom="".concat(l,"px"),o&&(p="translateY(".concat(5-r,"px)"))}}return{notchContainer:d(A(),20,20,d(a)),notch:d(T(),d(i),10,10),tooltip:d(M(),2*l+20,p)}}(n.align,n.justify,n.referenceElPos),r=e.notchContainer,o=e.notch,i=e.tooltip;return t.createElement("div",j({},rt,{role:"tooltip",id:yt,className:g(Z,i,tt[jt].tooltip,m),ref:dt}),t.createElement("div",{className:g(J,16===lt?q:$,tt[jt].children)},b),t.createElement("div",{className:r},t.createElement("div",{className:g(o,tt[jt].notch)})))}));return h?"function"==typeof h?h(P({},xt(w),{className:_,"aria-describedby":wt?yt:void 0,children:Pt})):t.cloneElement(h,P({},xt(w,h.props),{"aria-describedby":wt?yt:void 0,children:t.createElement(t.Fragment,null,h.props.children,Pt),className:g(_,h.props.className)})):Pt}rt.displayName="Tooltip",rt.propTypes={children:i.node,className:i.string,align:i.oneOf(Object.values(W)),justify:i.oneOf(Object.values(u)),trigger:i.oneOfType([i.node,i.func]),triggerEvent:i.oneOf(Object.values(K)),darkMode:i.bool,enabled:i.bool,open:i.bool,setOpen:i.func,id:i.string,shouldClose:i.func,usePortal:i.bool,portalClassName:i.string};export default rt;export{W as Align,K as TriggerEvent}; | ||
| import n,{useState as t,useMemo as e,useEffect as r,useCallback as o}from"react";import i from"prop-types";import{transparentize as a}from"polished";import c from"lodash/debounce";import l,{Justify as u,Align as p}from"@leafygreen-ui/popover";export{Justify}from"@leafygreen-ui/popover";import{useEscapeKey as f,useEventListener as s}from"@leafygreen-ui/hooks";import{css as d,cx as g}from"@leafygreen-ui/emotion";import{uiColors as m}from"@leafygreen-ui/palette";import{fontFamilies as b}from"@leafygreen-ui/tokens";import{IdAllocator as h,isComponentType as y}from"@leafygreen-ui/lib";import{useBaseFontSize as v}from"@leafygreen-ui/leafygreen-provider";import{isComponentGlyph as x}from"@leafygreen-ui/icon";import O from"lodash/clamp";function k(n,t,e){return t in n?Object.defineProperty(n,t,{value:e,enumerable:!0,configurable:!0,writable:!0}):n[t]=e,n}function j(){return(j=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var r in e)Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r])}return n}).apply(this,arguments)}function w(n,t){var e=Object.keys(n);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(n);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(n,t).enumerable}))),e.push.apply(e,r)}return e}function C(n){for(var t=1;t<arguments.length;t++){var e=null!=arguments[t]?arguments[t]:{};t%2?w(Object(e),!0).forEach((function(t){k(n,t,e[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(n,Object.getOwnPropertyDescriptors(e)):w(Object(e)).forEach((function(t){Object.defineProperty(n,t,Object.getOwnPropertyDescriptor(e,t))}))}return n}function P(n,t){if(null==n)return{};var e,r,o=function(n,t){if(null==n)return{};var e,r,o={},i=Object.keys(n);for(r=0;r<i.length;r++)e=i[r],t.indexOf(e)>=0||(o[e]=n[e]);return o}(n,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(n);for(r=0;r<i.length;r++)e=i[r],t.indexOf(e)>=0||Object.prototype.propertyIsEnumerable.call(n,e)&&(o[e]=n[e])}return o}function E(n,t){return t||(t=n.slice(0)),Object.freeze(Object.defineProperties(n,{raw:{value:Object.freeze(t)}}))}function N(n,t){return function(n){if(Array.isArray(n))return n}(n)||function(n,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(n)))return;var e=[],r=!0,o=!1,i=void 0;try{for(var a,c=n[Symbol.iterator]();!(r=(a=c.next()).done)&&(e.push(a.value),!t||e.length!==t);r=!0);}catch(n){o=!0,i=n}finally{try{r||null==c.return||c.return()}finally{if(o)throw i}}return e}(n,t)||function(n,t){if(!n)return;if("string"==typeof n)return S(n,t);var e=Object.prototype.toString.call(n).slice(8,-1);"Object"===e&&n.constructor&&(e=n.constructor.name);if("Map"===e||"Set"===e)return Array.from(n);if("Arguments"===e||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(e))return S(n,t)}(n,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function S(n,t){(null==t||t>n.length)&&(t=n.length);for(var e=0,r=new Array(t);e<t;e++)r[e]=n[e];return r}function I(){var n=E(["\n min-width: ","px;\n transform: ",";\n "]);return I=function(){return n},n}function M(){var n=E(["\n ",";\n position: absolute;\n transform: rotate(45deg);\n width: ","px;\n height: ","px;\n margin: auto;\n "]);return M=function(){return n},n}function T(){var n=E(["\n position: absolute;\n width: ","px;\n height: ","px;\n overflow: hidden;\n margin: auto;\n pointer-events: none;\n ",";\n "]);return T=function(){return n},n}var A;function L(){var n=E(["\n background-color: ",";\n border: 1px solid ",";\n box-shadow: 2px 2px 4px ",";\n "]);return L=function(){return n},n}function z(){var n=E(["\n color: ",";\n "]);return z=function(){return n},n}function D(){var n=E(["\n background-color: ",";\n color: ",";\n border: 1px solid ",";\n "]);return D=function(){return n},n}function F(){var n=E(["\n background-color: ",";\n box-shadow: 2px 2px 4px ",";\n "]);return F=function(){return n},n}function H(){var n=E(["\n color: ",";\n "]);return H=function(){return n},n}function B(){var n=E(["\n background-color: ",";\n color: ",";\n "]);return B=function(){return n},n}function U(){var n=E(["\n position: relative;\n"]);return U=function(){return n},n}function Z(){var n=E(["\n padding: 14px 16px;\n border-radius: 3px;\n box-shadow: 0px 2px 4px -1px ",";\n cursor: default;\n overflow-wrap: break-word;\n"]);return Z=function(){return n},n}function G(){var n=E(["\n font-size: 16px;\n line-height: 24px;\n letter-spacing: 0px;\n"]);return G=function(){return n},n}function R(){var n=E(["\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0px;\n"]);return R=function(){return n},n}function X(){var n=E(["\n margin: unset;\n font-family: ",";\n color: ",";\n font-weight: 400;\n"]);return X=function(){return n},n}var Y=d(X(),b.default,m.gray.dark3),J=d(R()),$=d(G()),q={Hover:"hover",Click:"click"},K="light",Q="dark",V={Top:p.Top,Bottom:p.Bottom,Left:p.Left,Right:p.Right},W=d(Z(),a(.8,m.black)),_=d(U()),nn=(k(A={},Q,{tooltip:d(B(),m.gray.dark3,m.gray.light1),children:d(H(),m.gray.light1),notch:d(F(),m.gray.dark3,a(.9,m.black))}),k(A,K,{tooltip:d(D(),m.gray.light3,m.gray.dark2,m.gray.light2),children:d(z(),m.gray.dark2),notch:d(L(),m.gray.light3,m.gray.light2,a(.9,m.black))}),A),tn=h.create("tooltip"),en=function(n){n.stopPropagation()};function rn(i){var a=i.open,p=i.setOpen,m=i.className,b=i.children,h=i.trigger,k=i.triggerEvent,w=void 0===k?q.Hover:k,E=i.darkMode,S=void 0!==E&&E,A=i.enabled,L=void 0===A||A,z=i.align,D=void 0===z?"top":z,F=i.justify,H=void 0===F?"start":F,B=i.spacing,U=void 0===B?12:B,Z=i.id,G=i.shouldClose,R=i.usePortal,X=void 0===R||R,V=i.portalClassName,rn=i.portalContainer,on=i.scrollContainer,an=i.popoverZIndex,cn=P(i,["open","setOpen","className","children","trigger","triggerEvent","darkMode","enabled","align","justify","spacing","id","shouldClose","usePortal","portalClassName","portalContainer","scrollContainer","popoverZIndex"]),ln="boolean"==typeof a,un=N(t(!1),2),pn=un[0],fn=un[1],sn=v(),dn=ln?a:pn,gn=ln&&p?p:fn,mn=N(t(null),2),bn=mn[0],hn=mn[1],yn=N(t(null),2),vn=yn[0],xn=yn[1],On=null!=Z?Z:null==bn?void 0:bn.id,kn=e((function(){return null!=On?On:tn.generate()}),[On]);r((function(){(h&&y(h,"Icon")||x(h))&&console.warn("Using a LeafyGreenUI Icon or Glyph component as a trigger will not render a Tooltip, as these components do not render their children. To use, please wrap your trigger element in another HTML tag.")}),[h]);var jn=o((function(){("function"!=typeof G||G())&&gn(!1)}),[gn,G]),wn=o((function(n,t){return n===q.Hover?{ref:xn,onMouseEnter:c((function(){gn(!0)}),35),onMouseLeave:c(jn,35),onFocus:function(){return gn(!0)},onBlur:jn}:t&&t.onClick?{onClick:function(n){n.target!==bn&&(t.onClick(),gn((function(n){return!n})))}}:{ref:xn,onClick:function(n){n.target!==bn&&gn((function(n){return!n}))}}}),[jn,gn,bn]);f(jn,{enabled:dn});var Cn=o((function(n){bn&&(h&&vn?bn.contains(n.target)||vn.contains(n.target)||jn():bn.contains(n.target)||jn())}),[jn,bn,h,vn]);s("click",Cn,{enabled:dn&&"click"===w});var Pn=C({popoverZIndex:an},X?{spacing:U,usePortal:X,portalClassName:V,portalContainer:rn,scrollContainer:on}:{spacing:U,usePortal:X}),En=S?Q:K,Nn=L&&dn,Sn=n.createElement(l,j({key:"tooltip",active:Nn,align:D,justify:H,adjustOnMutation:!0,onClick:en},Pn),(function(t){var e=function(n,t,e){if(!n||!t||!e)return{notchContainer:"",notch:"",tooltip:""};var r,o,i={},a={},c=10,l=0,p="";switch(n){case"top":case"bottom":switch(c=15,r=e.width/2-10,l=O(r,5,c),o=r<=5,i.left="0px",i.right="0px","top"===n?(a.top="calc(100% - 1px)",i.top="".concat(-5,"px")):(a.bottom="calc(100% - 1px)",i.bottom="".concat(-5,"px")),t){case u.Start:a.left="".concat(l,"px"),o&&(p="translateX(-".concat(5-r,"px)"));break;case u.Middle:case u.Fit:a.left="0px",a.right="0px";break;case u.End:a.right="".concat(l,"px"),o&&(p="translateX(".concat(5-r,"px)"))}break;case"left":case"right":switch(c=10,r=e.height/2-10,l=O(r,5,c),o=r<=5,i.top="0px",i.bottom="0px","left"===n?(i.left="".concat(-5,"px"),a.left="100%"):(i.right="".concat(-5,"px"),a.right="100%"),t){case u.Start:a.top="".concat(l,"px"),o&&(p="translateY(-".concat(5-r,"px)"));break;case u.Middle:case u.Fit:a.top="0px",a.bottom="0px";break;case u.End:a.bottom="".concat(l,"px"),o&&(p="translateY(".concat(5-r,"px)"))}}return{notchContainer:d(T(),20,20,d(a)),notch:d(M(),d(i),10,10),tooltip:d(I(),2*l+20,p)}}(t.align,t.justify,t.referenceElPos),r=e.notchContainer,o=e.notch,i=e.tooltip;return n.createElement("div",j({},cn,{role:"tooltip",id:kn,className:g(W,i,nn[En].tooltip,m),ref:hn}),n.createElement("div",{className:g(Y,16===sn?$:J,nn[En].children)},b),n.createElement("div",{className:r},n.createElement("div",{className:g(o,nn[En].notch)})))}));return h?"function"==typeof h?h(C({},wn(w),{className:_,"aria-describedby":Nn?kn:void 0,children:Sn})):n.cloneElement(h,C({},wn(w,h.props),{"aria-describedby":Nn?kn:void 0,children:n.createElement(n.Fragment,null,h.props.children,Sn),className:g(_,h.props.className)})):Sn}rn.displayName="Tooltip",rn.propTypes={children:i.node,className:i.string,align:i.oneOf(Object.values(V)),justify:i.oneOf(Object.values(u)),trigger:i.oneOfType([i.node,i.func]),triggerEvent:i.oneOf(Object.values(q)),darkMode:i.bool,enabled:i.bool,open:i.bool,setOpen:i.func,id:i.string,shouldClose:i.func,usePortal:i.bool,portalClassName:i.string};export default rn;export{V as Align,q as TriggerEvent}; | ||
| //# sourceMappingURL=index.js.map |
@@ -1,2 +0,2 @@ | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("polished"),require("lodash/debounce"),require("@leafygreen-ui/popover"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/icon"),require("lodash/clamp")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","polished","lodash/debounce","@leafygreen-ui/popover","@leafygreen-ui/hooks","@leafygreen-ui/emotion","@leafygreen-ui/palette","@leafygreen-ui/tokens","@leafygreen-ui/lib","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/icon","lodash/clamp"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/tooltip"]={},e.React,e.PropTypes,e.polished,e.debounce,e["@leafygreen-ui/popover"],e["@leafygreen-ui/hooks"],e["@leafygreen-ui/emotion"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/icon"],e.clamp)}(this,(function(e,t,n,r,o,i,a,l,u,c,s,f,p,d){"use strict";function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y,b=g(t),h=g(n),v=g(o),m=g(i),x=g(d);function O(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function k(){return(k=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function j(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function C(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?j(Object(n),!0).forEach((function(t){O(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):j(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function w(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function P(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function E(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,i=void 0;try{for(var a,l=e[Symbol.iterator]();!(r=(a=l.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw i}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return S(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return S(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function S(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function N(){var e=P(["\n min-width: ","px;\n transform: ",";\n "]);return N=function(){return e},e}function T(){var e=P(["\n ",";\n position: absolute;\n transform: rotate(45deg);\n width: ","px;\n height: ","px;\n margin: auto;\n "]);return T=function(){return e},e}function q(){var e=P(["\n position: absolute;\n width: ","px;\n height: ","px;\n overflow: hidden;\n margin: auto;\n pointer-events: none;\n ",";\n "]);return q=function(){return e},e}function A(){var e=P(["\n background-color: ",";\n border: 1px solid ",";\n box-shadow: 2px 2px 4px ",";\n "]);return A=function(){return e},e}function M(){var e=P(["\n color: ",";\n "]);return M=function(){return e},e}function J(){var e=P(["\n background-color: ",";\n color: ",";\n border: 1px solid ",";\n "]);return J=function(){return e},e}function z(){var e=P(["\n background-color: ",";\n box-shadow: 2px 2px 4px ",";\n "]);return z=function(){return e},e}function I(){var e=P(["\n color: ",";\n "]);return I=function(){return e},e}function F(){var e=P(["\n background-color: ",";\n color: ",";\n "]);return F=function(){return e},e}function L(){var e=P(["\n position: relative;\n"]);return L=function(){return e},e}function B(){var e=P(["\n padding: 14px 16px;\n border-radius: 3px;\n box-shadow: 0px 2px 4px -1px ",";\n cursor: default;\n overflow-wrap: break-word;\n"]);return B=function(){return e},e}function D(){var e=P(["\n font-size: 16px;\n line-height: 24px;\n letter-spacing: 0px;\n"]);return D=function(){return e},e}function H(){var e=P(["\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0px;\n"]);return H=function(){return e},e}function G(){var e=P(["\n margin: unset;\n font-family: ",";\n color: ",";\n font-weight: 400;\n"]);return G=function(){return e},e}var R=l.css(G(),c.fontFamilies.default,u.uiColors.gray.dark3),U=l.css(H()),X=l.css(D()),Y={Hover:"hover",Click:"click"},_="light",K="dark",$={Top:i.Align.Top,Bottom:i.Align.Bottom,Left:i.Align.Left,Right:i.Align.Right},Q=l.css(B(),r.transparentize(.8,u.uiColors.black)),V=l.css(L()),W=(O(y={},K,{tooltip:l.css(F(),u.uiColors.gray.dark3,u.uiColors.gray.light1),children:l.css(I(),u.uiColors.gray.light1),notch:l.css(z(),u.uiColors.gray.dark3,r.transparentize(.9,u.uiColors.black))}),O(y,_,{tooltip:l.css(J(),u.uiColors.gray.light3,u.uiColors.gray.dark2,u.uiColors.gray.light2),children:l.css(M(),u.uiColors.gray.dark2),notch:l.css(A(),u.uiColors.gray.light3,u.uiColors.gray.light2,r.transparentize(.9,u.uiColors.black))}),y),Z=s.IdAllocator.create("tooltip"),ee=function(e){e.stopPropagation()};function te(e){var n=e.open,r=e.setOpen,o=e.className,u=e.children,c=e.trigger,d=e.triggerEvent,g=void 0===d?Y.Hover:d,y=e.darkMode,h=void 0!==y&&y,O=e.enabled,j=void 0===O||O,P=e.usePortal,S=void 0===P||P,A=e.align,M=void 0===A?"top":A,J=e.justify,z=void 0===J?"start":J,I=e.spacing,F=void 0===I?12:I,L=e.id,B=e.shouldClose,D=e.portalClassName,H=w(e,["open","setOpen","className","children","trigger","triggerEvent","darkMode","enabled","usePortal","align","justify","spacing","id","shouldClose","portalClassName"]),G="boolean"==typeof n,$=E(t.useState(!1),2),te=$[0],ne=$[1],re=f.useBaseFontSize(),oe=G?n:te,ie=G&&r?r:ne,ae=E(t.useState(null),2),le=ae[0],ue=ae[1],ce=E(t.useState(null),2),se=ce[0],fe=ce[1],pe=null!=L?L:null==le?void 0:le.id,de=t.useMemo((function(){return null!=pe?pe:Z.generate()}),[pe]);t.useEffect((function(){(c&&s.isComponentType(c,"Icon")||p.isComponentGlyph(c))&&console.warn("Using a LeafyGreenUI Icon or Glyph component as a trigger will not render a Tooltip, as these components do not render their children. To use, please wrap your trigger element in another HTML tag.")}),[c]);var ge=t.useCallback((function(){("function"!=typeof B||B())&&ie(!1)}),[ie,B]),ye=t.useCallback((function(e,t){return e===Y.Hover?{ref:fe,onMouseEnter:v.default((function(){ie(!0)}),35),onMouseLeave:v.default(ge,35),onFocus:function(){return ie(!0)},onBlur:ge}:t&&t.onClick?{onClick:function(e){e.target!==le&&(t.onClick(),ie((function(e){return!e})))}}:{ref:fe,onClick:function(e){e.target!==le&&ie((function(e){return!e}))}}}),[ge,ie,le]);a.useEscapeKey(ge,{enabled:oe});var be=t.useCallback((function(e){le&&(c&&se?le.contains(e.target)||se.contains(e.target)||ge():le.contains(e.target)||ge())}),[ge,le,c,se]);a.useEventListener("click",be,{enabled:oe&&"click"===g});var he=S?{spacing:F,usePortal:S,portalClassName:D}:{spacing:F,usePortal:S},ve=h?K:_,me=j&&oe,xe=b.default.createElement(m.default,k({key:"tooltip",active:me,align:M,justify:z,adjustOnMutation:!0,onClick:ee},he),(function(e){var t=function(e,t,n){if(!e||!t||!n)return{notchContainer:"",notch:"",tooltip:""};var r,o,a={},u={},c=10,s=0,f="";switch(e){case"top":case"bottom":switch(c=15,r=n.width/2-10,s=x.default(r,5,c),o=r<=5,a.left="0px",a.right="0px","top"===e?(u.top="calc(100% - 1px)",a.top="".concat(-5,"px")):(u.bottom="calc(100% - 1px)",a.bottom="".concat(-5,"px")),t){case i.Justify.Start:u.left="".concat(s,"px"),o&&(f="translateX(-".concat(5-r,"px)"));break;case i.Justify.Middle:case i.Justify.Fit:u.left="0px",u.right="0px";break;case i.Justify.End:u.right="".concat(s,"px"),o&&(f="translateX(".concat(5-r,"px)"))}break;case"left":case"right":switch(c=10,r=n.height/2-10,s=x.default(r,5,c),o=r<=5,a.top="0px",a.bottom="0px","left"===e?(a.left="".concat(-5,"px"),u.left="100%"):(a.right="".concat(-5,"px"),u.right="100%"),t){case i.Justify.Start:u.top="".concat(s,"px"),o&&(f="translateY(-".concat(5-r,"px)"));break;case i.Justify.Middle:case i.Justify.Fit:u.top="0px",u.bottom="0px";break;case i.Justify.End:u.bottom="".concat(s,"px"),o&&(f="translateY(".concat(5-r,"px)"))}}return{notchContainer:l.css(q(),20,20,l.css(u)),notch:l.css(T(),l.css(a),10,10),tooltip:l.css(N(),2*s+20,f)}}(e.align,e.justify,e.referenceElPos),n=t.notchContainer,r=t.notch,a=t.tooltip;return b.default.createElement("div",k({},H,{role:"tooltip",id:de,className:l.cx(Q,a,W[ve].tooltip,o),ref:ue}),b.default.createElement("div",{className:l.cx(R,16===re?X:U,W[ve].children)},u),b.default.createElement("div",{className:n},b.default.createElement("div",{className:l.cx(r,W[ve].notch)})))}));return c?"function"==typeof c?c(C({},ye(g),{className:V,"aria-describedby":me?de:void 0,children:xe})):b.default.cloneElement(c,C({},ye(g,c.props),{"aria-describedby":me?de:void 0,children:b.default.createElement(b.default.Fragment,null,c.props.children,xe),className:l.cx(V,c.props.className)})):xe}te.displayName="Tooltip",te.propTypes={children:h.default.node,className:h.default.string,align:h.default.oneOf(Object.values($)),justify:h.default.oneOf(Object.values(i.Justify)),trigger:h.default.oneOfType([h.default.node,h.default.func]),triggerEvent:h.default.oneOf(Object.values(Y)),darkMode:h.default.bool,enabled:h.default.bool,open:h.default.bool,setOpen:h.default.func,id:h.default.string,shouldClose:h.default.func,usePortal:h.default.bool,portalClassName:h.default.string},Object.defineProperty(e,"Justify",{enumerable:!0,get:function(){return i.Justify}}),e.Align=$,e.TriggerEvent=Y,e.default=te,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
| !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("prop-types"),require("polished"),require("lodash/debounce"),require("@leafygreen-ui/popover"),require("@leafygreen-ui/hooks"),require("@leafygreen-ui/emotion"),require("@leafygreen-ui/palette"),require("@leafygreen-ui/tokens"),require("@leafygreen-ui/lib"),require("@leafygreen-ui/leafygreen-provider"),require("@leafygreen-ui/icon"),require("lodash/clamp")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","polished","lodash/debounce","@leafygreen-ui/popover","@leafygreen-ui/hooks","@leafygreen-ui/emotion","@leafygreen-ui/palette","@leafygreen-ui/tokens","@leafygreen-ui/lib","@leafygreen-ui/leafygreen-provider","@leafygreen-ui/icon","lodash/clamp"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self)["@leafygreen-ui/tooltip"]={},e.React,e.PropTypes,e.polished,e.debounce,e["@leafygreen-ui/popover"],e["@leafygreen-ui/hooks"],e["@leafygreen-ui/emotion"],e["@leafygreen-ui/palette"],e["@leafygreen-ui/tokens"],e["@leafygreen-ui/lib"],e["@leafygreen-ui/leafygreen-provider"],e["@leafygreen-ui/icon"],e.clamp)}(this,(function(e,t,n,r,o,i,a,l,u,c,s,f,p,d){"use strict";function g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y,b=g(t),h=g(n),v=g(o),m=g(i),x=g(d);function O(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}function k(){return(k=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function C(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function j(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?C(Object(n),!0).forEach((function(t){O(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):C(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function w(e,t){if(null==e)return{};var n,r,o=function(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n])}return o}function P(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}function E(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if("undefined"==typeof Symbol||!(Symbol.iterator in Object(e)))return;var n=[],r=!0,o=!1,i=void 0;try{for(var a,l=e[Symbol.iterator]();!(r=(a=l.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(e){o=!0,i=e}finally{try{r||null==l.return||l.return()}finally{if(o)throw i}}return n}(e,t)||function(e,t){if(!e)return;if("string"==typeof e)return S(e,t);var n=Object.prototype.toString.call(e).slice(8,-1);"Object"===n&&e.constructor&&(n=e.constructor.name);if("Map"===n||"Set"===n)return Array.from(e);if("Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n))return S(e,t)}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}()}function S(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}function N(){var e=P(["\n min-width: ","px;\n transform: ",";\n "]);return N=function(){return e},e}function T(){var e=P(["\n ",";\n position: absolute;\n transform: rotate(45deg);\n width: ","px;\n height: ","px;\n margin: auto;\n "]);return T=function(){return e},e}function q(){var e=P(["\n position: absolute;\n width: ","px;\n height: ","px;\n overflow: hidden;\n margin: auto;\n pointer-events: none;\n ",";\n "]);return q=function(){return e},e}function A(){var e=P(["\n background-color: ",";\n border: 1px solid ",";\n box-shadow: 2px 2px 4px ",";\n "]);return A=function(){return e},e}function M(){var e=P(["\n color: ",";\n "]);return M=function(){return e},e}function I(){var e=P(["\n background-color: ",";\n color: ",";\n border: 1px solid ",";\n "]);return I=function(){return e},e}function J(){var e=P(["\n background-color: ",";\n box-shadow: 2px 2px 4px ",";\n "]);return J=function(){return e},e}function z(){var e=P(["\n color: ",";\n "]);return z=function(){return e},e}function F(){var e=P(["\n background-color: ",";\n color: ",";\n "]);return F=function(){return e},e}function L(){var e=P(["\n position: relative;\n"]);return L=function(){return e},e}function B(){var e=P(["\n padding: 14px 16px;\n border-radius: 3px;\n box-shadow: 0px 2px 4px -1px ",";\n cursor: default;\n overflow-wrap: break-word;\n"]);return B=function(){return e},e}function D(){var e=P(["\n font-size: 16px;\n line-height: 24px;\n letter-spacing: 0px;\n"]);return D=function(){return e},e}function H(){var e=P(["\n font-size: 14px;\n line-height: 20px;\n letter-spacing: 0px;\n"]);return H=function(){return e},e}function G(){var e=P(["\n margin: unset;\n font-family: ",";\n color: ",";\n font-weight: 400;\n"]);return G=function(){return e},e}var R=l.css(G(),c.fontFamilies.default,u.uiColors.gray.dark3),U=l.css(H()),Z=l.css(D()),X={Hover:"hover",Click:"click"},Y="light",_="dark",K={Top:i.Align.Top,Bottom:i.Align.Bottom,Left:i.Align.Left,Right:i.Align.Right},$=l.css(B(),r.transparentize(.8,u.uiColors.black)),Q=l.css(L()),V=(O(y={},_,{tooltip:l.css(F(),u.uiColors.gray.dark3,u.uiColors.gray.light1),children:l.css(z(),u.uiColors.gray.light1),notch:l.css(J(),u.uiColors.gray.dark3,r.transparentize(.9,u.uiColors.black))}),O(y,Y,{tooltip:l.css(I(),u.uiColors.gray.light3,u.uiColors.gray.dark2,u.uiColors.gray.light2),children:l.css(M(),u.uiColors.gray.dark2),notch:l.css(A(),u.uiColors.gray.light3,u.uiColors.gray.light2,r.transparentize(.9,u.uiColors.black))}),y),W=s.IdAllocator.create("tooltip"),ee=function(e){e.stopPropagation()};function te(e){var n=e.open,r=e.setOpen,o=e.className,u=e.children,c=e.trigger,d=e.triggerEvent,g=void 0===d?X.Hover:d,y=e.darkMode,h=void 0!==y&&y,O=e.enabled,C=void 0===O||O,P=e.align,S=void 0===P?"top":P,A=e.justify,M=void 0===A?"start":A,I=e.spacing,J=void 0===I?12:I,z=e.id,F=e.shouldClose,L=e.usePortal,B=void 0===L||L,D=e.portalClassName,H=e.portalContainer,G=e.scrollContainer,K=e.popoverZIndex,te=w(e,["open","setOpen","className","children","trigger","triggerEvent","darkMode","enabled","align","justify","spacing","id","shouldClose","usePortal","portalClassName","portalContainer","scrollContainer","popoverZIndex"]),ne="boolean"==typeof n,re=E(t.useState(!1),2),oe=re[0],ie=re[1],ae=f.useBaseFontSize(),le=ne?n:oe,ue=ne&&r?r:ie,ce=E(t.useState(null),2),se=ce[0],fe=ce[1],pe=E(t.useState(null),2),de=pe[0],ge=pe[1],ye=null!=z?z:null==se?void 0:se.id,be=t.useMemo((function(){return null!=ye?ye:W.generate()}),[ye]);t.useEffect((function(){(c&&s.isComponentType(c,"Icon")||p.isComponentGlyph(c))&&console.warn("Using a LeafyGreenUI Icon or Glyph component as a trigger will not render a Tooltip, as these components do not render their children. To use, please wrap your trigger element in another HTML tag.")}),[c]);var he=t.useCallback((function(){("function"!=typeof F||F())&&ue(!1)}),[ue,F]),ve=t.useCallback((function(e,t){return e===X.Hover?{ref:ge,onMouseEnter:v.default((function(){ue(!0)}),35),onMouseLeave:v.default(he,35),onFocus:function(){return ue(!0)},onBlur:he}:t&&t.onClick?{onClick:function(e){e.target!==se&&(t.onClick(),ue((function(e){return!e})))}}:{ref:ge,onClick:function(e){e.target!==se&&ue((function(e){return!e}))}}}),[he,ue,se]);a.useEscapeKey(he,{enabled:le});var me=t.useCallback((function(e){se&&(c&&de?se.contains(e.target)||de.contains(e.target)||he():se.contains(e.target)||he())}),[he,se,c,de]);a.useEventListener("click",me,{enabled:le&&"click"===g});var xe=j({popoverZIndex:K},B?{spacing:J,usePortal:B,portalClassName:D,portalContainer:H,scrollContainer:G}:{spacing:J,usePortal:B}),Oe=h?_:Y,ke=C&&le,Ce=b.default.createElement(m.default,k({key:"tooltip",active:ke,align:S,justify:M,adjustOnMutation:!0,onClick:ee},xe),(function(e){var t=function(e,t,n){if(!e||!t||!n)return{notchContainer:"",notch:"",tooltip:""};var r,o,a={},u={},c=10,s=0,f="";switch(e){case"top":case"bottom":switch(c=15,r=n.width/2-10,s=x.default(r,5,c),o=r<=5,a.left="0px",a.right="0px","top"===e?(u.top="calc(100% - 1px)",a.top="".concat(-5,"px")):(u.bottom="calc(100% - 1px)",a.bottom="".concat(-5,"px")),t){case i.Justify.Start:u.left="".concat(s,"px"),o&&(f="translateX(-".concat(5-r,"px)"));break;case i.Justify.Middle:case i.Justify.Fit:u.left="0px",u.right="0px";break;case i.Justify.End:u.right="".concat(s,"px"),o&&(f="translateX(".concat(5-r,"px)"))}break;case"left":case"right":switch(c=10,r=n.height/2-10,s=x.default(r,5,c),o=r<=5,a.top="0px",a.bottom="0px","left"===e?(a.left="".concat(-5,"px"),u.left="100%"):(a.right="".concat(-5,"px"),u.right="100%"),t){case i.Justify.Start:u.top="".concat(s,"px"),o&&(f="translateY(-".concat(5-r,"px)"));break;case i.Justify.Middle:case i.Justify.Fit:u.top="0px",u.bottom="0px";break;case i.Justify.End:u.bottom="".concat(s,"px"),o&&(f="translateY(".concat(5-r,"px)"))}}return{notchContainer:l.css(q(),20,20,l.css(u)),notch:l.css(T(),l.css(a),10,10),tooltip:l.css(N(),2*s+20,f)}}(e.align,e.justify,e.referenceElPos),n=t.notchContainer,r=t.notch,a=t.tooltip;return b.default.createElement("div",k({},te,{role:"tooltip",id:be,className:l.cx($,a,V[Oe].tooltip,o),ref:fe}),b.default.createElement("div",{className:l.cx(R,16===ae?Z:U,V[Oe].children)},u),b.default.createElement("div",{className:n},b.default.createElement("div",{className:l.cx(r,V[Oe].notch)})))}));return c?"function"==typeof c?c(j({},ve(g),{className:Q,"aria-describedby":ke?be:void 0,children:Ce})):b.default.cloneElement(c,j({},ve(g,c.props),{"aria-describedby":ke?be:void 0,children:b.default.createElement(b.default.Fragment,null,c.props.children,Ce),className:l.cx(Q,c.props.className)})):Ce}te.displayName="Tooltip",te.propTypes={children:h.default.node,className:h.default.string,align:h.default.oneOf(Object.values(K)),justify:h.default.oneOf(Object.values(i.Justify)),trigger:h.default.oneOfType([h.default.node,h.default.func]),triggerEvent:h.default.oneOf(Object.values(X)),darkMode:h.default.bool,enabled:h.default.bool,open:h.default.bool,setOpen:h.default.func,id:h.default.string,shouldClose:h.default.func,usePortal:h.default.bool,portalClassName:h.default.string},Object.defineProperty(e,"Justify",{enumerable:!0,get:function(){return i.Justify}}),e.Align=K,e.TriggerEvent=X,e.default=te,Object.defineProperty(e,"__esModule",{value:!0})})); | ||
| //# sourceMappingURL=index.js.map |
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import { PopoverProps, Justify } from '@leafygreen-ui/popover'; | ||
| import { OneOf, HTMLElementProps } from '@leafygreen-ui/lib'; | ||
| import { HTMLElementProps } from '@leafygreen-ui/lib'; | ||
| export declare const TriggerEvent: { | ||
@@ -24,19 +24,2 @@ readonly Hover: "hover"; | ||
| declare type ModifiedPopoverProps = Omit<PopoverProps, 'active' | 'refEl'>; | ||
| declare type PortalProps = OneOf<{ | ||
| /** | ||
| * Specifies that the popover content will appear portaled to the end of the DOM, | ||
| * rather than in the DOM tree. | ||
| * | ||
| * default: `true` | ||
| */ | ||
| usePortal?: true; | ||
| /** | ||
| * If using a portal, specifies a class name to apply to the root element of the portal. | ||
| * | ||
| * default: undefined | ||
| */ | ||
| portalClassName?: string; | ||
| }, { | ||
| usePortal: false; | ||
| }>; | ||
| export declare type TooltipProps = Omit<HTMLElementProps<'div'>, keyof ModifiedPopoverProps> & ModifiedPopoverProps & { | ||
@@ -81,3 +64,3 @@ /** | ||
| enabled?: boolean; | ||
| } & PortalProps; | ||
| }; | ||
| /** | ||
@@ -111,3 +94,3 @@ * # Tooltip | ||
| */ | ||
| declare function Tooltip({ open: controlledOpen, setOpen: controlledSetOpen, className, children, trigger, triggerEvent, darkMode, enabled, usePortal, align, justify, spacing, id, shouldClose, portalClassName, ...rest }: TooltipProps): any; | ||
| declare function Tooltip({ open: controlledOpen, setOpen: controlledSetOpen, className, children, trigger, triggerEvent, darkMode, enabled, align, justify, spacing, id, shouldClose, usePortal, portalClassName, portalContainer, scrollContainer, popoverZIndex, ...rest }: TooltipProps): any; | ||
| declare namespace Tooltip { | ||
@@ -114,0 +97,0 @@ var displayName: string; |
| { | ||
| "name": "@leafygreen-ui/tooltip", | ||
| "version": "6.1.9", | ||
| "version": "6.2.0", | ||
| "description": "LeafyGreen UI Kit Tooltip", | ||
@@ -23,7 +23,7 @@ "main": "./dist/index.js", | ||
| "devDependencies": { | ||
| "@leafygreen-ui/button": "^11.0.2" | ||
| "@leafygreen-ui/button": "^12.0.0" | ||
| }, | ||
| "dependencies": { | ||
| "@leafygreen-ui/icon": "^10.2.1", | ||
| "@leafygreen-ui/popover": "^7.1.4", | ||
| "@leafygreen-ui/popover": "^7.2.0", | ||
| "@leafygreen-ui/lib": "^7.0.0", | ||
@@ -30,0 +30,0 @@ "@leafygreen-ui/palette": "^3.2.1", |
@@ -58,17 +58,21 @@ # Tooltip | ||
| | Prop | Type | Description | Default | | ||
| | -------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | | ||
| | `open` | `boolean` | Controls the component, and determines whether or not the `<Tooltip />` will appear open or closed. | `false` | | ||
| | `setOpen` | `function` | If controlling the component, pass state handling function to setOpen prop. This will keep the consuming application's state in-sync with LeafyGreen's state, while the `<Tooltip />` component responds to events such as backdrop clicks and a user pressing the Escape key. | `(boolean) => boolean` | | ||
| | `shouldClose` | `function` | Callback that should return a boolean that determines whether or not the `<Tooltip />` should close when a user tries to close it. | `() => true` | | ||
| | `align` | `'top'`, `'bottom'`, `'left'`, `'right'` | Determines the preferred alignment of the `<Tooltip />` component relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element. | `'top'` | | ||
| | `justify` | `'start'`, `'middle'`, `'end'`, `'fit'` | Determines the preferred justification of the `<Tooltip />` component (based on the alignment) relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element. | `'start'` | | ||
| | `trigger` | `function`, `React.ReactNode` | A `React.ReactNode` against which the `<Tooltip />` will be positioned, and what will be used to trigger the opening and closing of the `Tooltip` component, when the `Tooltip` is uncontrolled. If no `trigger` is passed, the `Tooltip` will be positioned against its nearest parent element. If using a `ReactNode` or inline function, trigger signature is: ({children, ...rest}) => (<button {...rest}>trigger {children}</button>). When using a function, you must pass `children` as an argument in order for the tooltip to render. | | | ||
| | `triggerEvent` | `'hover'`, `'click'` | DOM event that triggers opening/closing of `<Tooltip />` component | `'hover'` | | ||
| | `darkMode` | `boolean` | Determines if the `<Tooltip />` will appear in dark mode. | `false` | | ||
| | `id` | `string` | `id` applied to `<Tooltip />` component | | | ||
| | `className` | `string` | Applies a className to Tooltip container | | | ||
| | `children` | `node` | Content that will be rendered inside of `<Tooltip />` | | | ||
| | `usePortal` | `boolean` | Determines whether or not the Tooltip will be Portaled | `true` | | ||
| | `enabled` | `boolean` | Enables Tooltip to trigger based on the event specified by `triggerEvent`. | `true` | | ||
| | ... | native `div` attributes | Any other props will be spread on the root `div` element | | | ||
| | Prop | Type | Description | Default | | ||
| | ----------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- | --- | | ||
| | `open` | `boolean` | Controls the component, and determines whether or not the `<Tooltip />` will appear open or closed. | `false` | | ||
| | `setOpen` | `function` | If controlling the component, pass state handling function to setOpen prop. This will keep the consuming application's state in-sync with LeafyGreen's state, while the `<Tooltip />` component responds to events such as backdrop clicks and a user pressing the Escape key. | `(boolean) => boolean` | | ||
| | `shouldClose` | `function` | Callback that should return a boolean that determines whether or not the `<Tooltip />` should close when a user tries to close it. | `() => true` | | ||
| | `align` | `'top'`, `'bottom'`, `'left'`, `'right'` | Determines the preferred alignment of the `<Tooltip />` component relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element. | `'top'` | | ||
| | `justify` | `'start'`, `'middle'`, `'end'`, `'fit'` | Determines the preferred justification of the `<Tooltip />` component (based on the alignment) relative to the element passed to the `trigger` prop. If no `trigger` is passed, the Tooltip will be positioned against its nearest parent element. | `'start'` | | ||
| | `trigger` | `function`, `React.ReactNode` | A `React.ReactNode` against which the `<Tooltip />` will be positioned, and what will be used to trigger the opening and closing of the `Tooltip` component, when the `Tooltip` is uncontrolled. If no `trigger` is passed, the `Tooltip` will be positioned against its nearest parent element. If using a `ReactNode` or inline function, trigger signature is: ({children, ...rest}) => (<button {...rest}>trigger {children}</button>). When using a function, you must pass `children` as an argument in order for the tooltip to render. | | | ||
| | `triggerEvent` | `'hover'`, `'click'` | DOM event that triggers opening/closing of `<Tooltip />` component | `'hover'` | | ||
| | `darkMode` | `boolean` | Determines if the `<Tooltip />` will appear in dark mode. | `false` | | ||
| | `id` | `string` | `id` applied to `<Tooltip />` component | | | ||
| | `className` | `string` | Applies a className to Tooltip container | | | ||
| | `children` | `node` | Content that will be rendered inside of `<Tooltip />` | | | ||
| | `enabled` | `boolean` | Enables Tooltip to trigger based on the event specified by `triggerEvent`. | `true` | | ||
| | `usePortal` | `boolean` | Determines if the Tooltip will be rendered within a portal. | `true` | | ||
| | `portalContainer` | `HTMLElement` \| `null` | Sets the container used for the popover's portal. | | | ||
| | `scrollContainer` | `HTMLElement` \| `null` | If the popover portal has a scrollable ancestor other than the window, this prop allows passing a reference to that lement to allow the portal to position properly. | | | ||
| | `portalClassName` | `string` | Passes the given className to the popover's portal container if the default portal container is being used. | | ||
| | `popoverZIndex` | `number` | Sets the z-index CSS property for the popover. | | | | ||
| | ... | native `div` attributes | Any other props will be spread on the root `div` element | | |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.81%
363160
- Number of lines in readme file
- increased by5.41%
78
Worsened metrics
- Lines of code
- decreased by-1.77%
1279