@cleartrip/ct-design-tooltip-v2 - npm Package Compare versions

Comparing version 3.14.0-SNAPSHORT-mevc.0 to 3.14.0-SNAPSHOT-atp-changes.0

dist/ct-design-tooltip-v2.browser.cjs.js

@@ -1,2 +0,2 @@
-"use strict";var t=require("tslib"),e=require("react/jsx-runtime"),o=require("react"),r=require("@cleartrip/ct-design-theme"),i=require("@cleartrip/ct-design-container"),n=require("styled-components"),l=require("@cleartrip/ct-design-icons"),s=require("@cleartrip/ct-design-common-utils"),u=require("@cleartrip/ct-design-use-merge-refs");function f(t){return t&&t.__esModule?t:{default:t}}var a,d,c,p=f(n),h=f(u);exports.HOVER_TYPE=void 0,(a=exports.HOVER_TYPE||(exports.HOVER_TYPE={})).ENTER="ENTER",a.LEAVE="LEAVE",exports.ITooltipV2BorderSize=void 0,(d=exports.ITooltipV2BorderSize||(exports.ITooltipV2BorderSize={})).XS="xs",d.SM="sm",d.MD="md",d.LG="lg",d.XL="xl",exports.ITooltipV2Position=void 0,(c=exports.ITooltipV2Position||(exports.ITooltipV2Position={})).AUTO="auto",c.LEFT="left",c.RIGHT="right",c.TOP="top",c.BOTTOM="bottom";var R=function(t){var e=t.position,o=t.labelRef,r=t.tooltipRef,i=t.anchorRef;if(t.theme,(null==o?void 0:o.current)&&(null==r?void 0:r.current)){var n=r.current.offsetHeight,l=r.current.offsetWidth,s=o.current.offsetHeight,u=o.current.offsetWidth;switch(e){case exports.ITooltipV2Position.LEFT:return{left:-(l+10),top:-(n/2-s/2)};case exports.ITooltipV2Position.RIGHT:return{left:u+10,top:-(n/2-s/2)};case exports.ITooltipV2Position.TOP:return function(t){var e=t.labelRef,o=t.tooltipRef,r=t.anchorRef,i=(null==r?void 0:r.current)||document.body;if((null==e?void 0:e.current)&&(null==o?void 0:o.current)){var n=i.getBoundingClientRect(),l=n.right,s=n.left,u=e.current.getBoundingClientRect(),f=u.right,a=u.left,d=o.current.offsetWidth,c=o.current.offsetHeight,p=e.current.offsetWidth,h=d-p<0?(d-p)/2:-(d-p)/2;return d>p&&l-f<(d-p)/2?h-=(d-p)/2-(l-f)+4:d>p&&a-s<(d-p)/2&&(h+=(d-p)/2-(a-s)+4),{top:-(c+10),left:h}}return{}}({labelRef:o,tooltipRef:r,anchorRef:i});case exports.ITooltipV2Position.BOTTOM:return function(t){var e=t.labelRef,o=t.tooltipRef,r=t.anchorRef,i=(null==r?void 0:r.current)||document.body;if((null==e?void 0:e.current)&&(null==o?void 0:o.current)){var n=i.getBoundingClientRect(),l=n.right,s=n.left,u=e.current.getBoundingClientRect(),f=u.right,a=u.left,d=o.current.offsetWidth,c=e.current.offsetHeight,p=e.current.offsetWidth,h=d-p<0?(d-p)/2:-(d-p)/2;return d>p&&l-f<(d-p)/2?h-=(d-p)/2-(l-f)+4:d>p&&a-s<(d-p)/2&&(h+=(d-p)/2-(a-s)+4),{top:c+10,left:h}}return{}}({labelRef:o,tooltipRef:r,anchorRef:i});case exports.ITooltipV2Position.AUTO:return function(t){var e=t.labelRef,o=t.tooltipRef,r=t.anchorRef,i=(null==r?void 0:r.current)||document.body;if((null==o?void 0:o.current)&&(null==e?void 0:e.current)&&i){var n=i.getBoundingClientRect(),l=o.current.getBoundingClientRect(),s=n.right,u=n.bottom,f=l.right,a=l.bottom,d=o.current.offsetHeight,c=o.current.offsetWidth,p=e.current.offsetHeight,h=e.current.offsetWidth;return f>s&&a>u?{left:c-h<0?c-h:-(c-h),top:-(d+10)}:a>u?{top:-(d+10)}:f>s?{left:c-h<0?c-h:-(c-h),top:p+10}:{top:p+10}}return{}}({labelRef:o,tooltipRef:r,anchorRef:i});default:return{left:u,top:-(n/2-s/2)}}}},g=function(t){var e=t.position,o=t.labelRef,r=t.tooltipRef,i=t.anchorRef;if(t.theme,(null==o?void 0:o.current)&&(null==r?void 0:r.current)){var n=o.current.offsetWidth,l=o.current.offsetHeight;switch(e){case exports.ITooltipV2Position.TOP:return{top:"-11px",left:n/2};case exports.ITooltipV2Position.BOTTOM:return{rotate:"180deg",top:l+5,left:n/2};case exports.ITooltipV2Position.LEFT:return{rotate:"-90deg",top:0,left:"-16px"};case exports.ITooltipV2Position.RIGHT:return{rotate:"90deg",top:0,left:n-1};case exports.ITooltipV2Position.AUTO:return function(t){var e=t.labelRef,o=t.tooltipRef,r=t.anchorRef,i=(null==r?void 0:r.current)||document.body;if((null==o?void 0:o.current)&&(null==e?void 0:e.current)&&i){var n=i.getBoundingClientRect(),l=o.current.getBoundingClientRect(),s=n.right,u=n.bottom,f=l.right,a=l.bottom,d=e.current.offsetHeight,c=e.current.offsetWidth;return f>s&&a>u||a>u?{top:"-11px",left:c/2}:{rotate:"180deg",left:c/2,top:d+5}}return{}}({labelRef:o,tooltipRef:r,anchorRef:i});default:return{rotate:"90deg",top:0,left:n}}}return{}},v=function(e){var o=e.borderSize,r=e.position,i=e.labelRef,n=e.tooltipRef,l=e.anchorRef,s=e.theme,u=R({position:r,labelRef:i,tooltipRef:n,anchorRef:l,theme:s})||{};return t.__assign(t.__assign({},u),function(t,e){switch(t){case exports.ITooltipV2BorderSize.XS:return{borderRadius:e.border.radius[4]};case exports.ITooltipV2BorderSize.SM:return{borderRadius:e.border.radius[6]};case exports.ITooltipV2BorderSize.MD:return{borderRadius:e.border.radius[8]};case exports.ITooltipV2BorderSize.LG:return{borderRadius:e.border.radius[16]};case exports.ITooltipV2BorderSize.XL:return{borderRadius:e.border.radius[32]};default:return{borderRadius:e.border.radius[8]}}}(o,s))},b=p.default.div((function(e){var o=e.borderRadius,r=e.width,i=e.left,n=e.top,l=e.theme,s=e.visibility,u=e.css;return t.__assign({backgroundColor:l.color.background.defaultDarkest,position:"absolute",zIndex:l.zIndex.tooltip,borderRadius:o,width:r,left:i,top:n,visibility:s},u)})),T=p.default.div((function(e){var o=e.rotate,r=e.top,i=e.left,n=e.theme,l=e.visibility,s=e.css;return t.__assign({rotate:o,top:r,left:i,zIndex:n.zIndex.tooltip,position:"absolute",width:"fit-content",display:"flex",visibility:l},s)}));exports.TooltipV2=function(n){var u=n.children,f=n.labelContainer,a=n.borderSize,d=void 0===a?exports.ITooltipV2BorderSize.MD:a,c=n.position,p=void 0===c?exports.ITooltipV2Position.RIGHT:c,R=n.width,x=n.anchorRef,m=n.tooltipContainerRef,E=n.open,V=n.enableTooltipContainerHovering,I=void 0!==V&&V,_=n.styleConfig,P=void 0===_?{}:_,B=r.useTheme(),C=P.root,H=P.labelContainer,M=P.tooltipArrowContainer,O=P.tooltipContainer,S=P.toottipArrowIcon,z=o.useState(E||!1),y=z[0],L=z[1],w=o.useState({}),W=w[0],q=w[1],A=o.useState({}),Y=A[0],j=A[1],G=o.useRef(null),D=o.useRef(null),X=h.default(m,D),F=function(){var t=v({borderSize:d,position:p,labelRef:G,tooltipRef:D,anchorRef:x,theme:B}),e=g({position:p,labelRef:G,tooltipRef:D,anchorRef:x,theme:B});q(t),j(e)};o.useEffect((function(){E?(F(),L(!0)):(q({}),j({}),L(!1))}),[E]);var N=function(t){return function(e){if(!E)if(t===exports.HOVER_TYPE.ENTER)F(),L(!0);else{if(I&&function(t){var e,o,r,i,n={right:0,left:0,bottom:0,top:0},l=null!==(o=null===(e=D.current)||void 0===e?void 0:e.getBoundingClientRect())&&void 0!==o?o:n,s=null!==(i=null===(r=G.current)||void 0===r?void 0:r.getBoundingClientRect())&&void 0!==i?i:n,u={r:Math.floor(Math.max(l.right,s.left)),l:Math.floor(Math.min(l.left,s.right)),b:Math.floor(Math.max(l.bottom,s.top)),t:Math.floor(Math.min(l.top,s.bottom))},f=u.r,a=u.l,d=u.b,c=u.t,p=t.clientX+1,h=t.clientY+1;return f>=p&&a<=p&&c<=h&&d>=h}(e))return;q({}),j({}),L(!1)}}};return e.jsxs(i.Container,t.__assign({position:"relative"},C,{children:[e.jsx(i.Container,t.__assign({onMouseEnter:N(exports.HOVER_TYPE.ENTER),onMouseLeave:N(exports.HOVER_TYPE.LEAVE),ref:G,width:"fit-content"},H,{children:f})),!!u&&e.jsxs(o.Fragment,{children:[e.jsx(b,t.__assign({},W,{visibility:y&&!s.isEmpty(W)?"visible":"hidden",width:R||"fit-content",theme:B,ref:X,onMouseLeave:N(exports.HOVER_TYPE.LEAVE)},O,{children:u})),e.jsx(T,t.__assign({},Y,{visibility:y&&!s.isEmpty(Y)?"visible":"hidden",theme:B},M,{children:e.jsx(l.TooltipChevronDown,t.__assign({},S))}))]})]}))};
+"use strict";var t=require("tslib"),e=require("react/jsx-runtime"),o=require("react"),r=require("@cleartrip/ct-design-theme"),i=require("@cleartrip/ct-design-container"),n=require("@cleartrip/ct-design-transition"),l=require("styled-components"),s=require("@cleartrip/ct-design-icons"),u=require("@cleartrip/ct-design-common-utils"),f=require("@cleartrip/ct-design-use-merge-refs");function a(t){return t&&t.__esModule?t:{default:t}}var d,c,p,h=a(l),R=a(f);exports.HOVER_TYPE=void 0,(d=exports.HOVER_TYPE||(exports.HOVER_TYPE={})).ENTER="ENTER",d.LEAVE="LEAVE",exports.ITooltipV2BorderSize=void 0,(c=exports.ITooltipV2BorderSize||(exports.ITooltipV2BorderSize={})).XS="xs",c.SM="sm",c.MD="md",c.LG="lg",c.XL="xl",exports.ITooltipV2Position=void 0,(p=exports.ITooltipV2Position||(exports.ITooltipV2Position={})).AUTO="auto",p.LEFT="left",p.RIGHT="right",p.TOP="top",p.BOTTOM="bottom";var g=function(t){var e=t.position,o=t.labelRef,r=t.tooltipRef,i=t.anchorRef;if(t.theme,(null==o?void 0:o.current)&&(null==r?void 0:r.current)){var n=r.current.offsetHeight,l=r.current.offsetWidth,s=o.current.offsetHeight,u=o.current.offsetWidth;switch(e){case exports.ITooltipV2Position.LEFT:return{left:-(l+10),top:-(n/2-s/2)};case exports.ITooltipV2Position.RIGHT:return{left:u+10,top:-(n/2-s/2)};case exports.ITooltipV2Position.TOP:return function(t){var e=t.labelRef,o=t.tooltipRef,r=t.anchorRef,i=(null==r?void 0:r.current)||document.body;if((null==e?void 0:e.current)&&(null==o?void 0:o.current)){var n=i.getBoundingClientRect(),l=n.right,s=n.left,u=e.current.getBoundingClientRect(),f=u.right,a=u.left,d=o.current.offsetWidth,c=o.current.offsetHeight,p=e.current.offsetWidth,h=d-p<0?(d-p)/2:-(d-p)/2;return d>p&&l-f<(d-p)/2?h-=(d-p)/2-(l-f)+4:d>p&&a-s<(d-p)/2&&(h+=(d-p)/2-(a-s)+4),{top:-(c+10),left:h}}return{}}({labelRef:o,tooltipRef:r,anchorRef:i});case exports.ITooltipV2Position.BOTTOM:return function(t){var e=t.labelRef,o=t.tooltipRef,r=t.anchorRef,i=(null==r?void 0:r.current)||document.body;if((null==e?void 0:e.current)&&(null==o?void 0:o.current)){var n=i.getBoundingClientRect(),l=n.right,s=n.left,u=e.current.getBoundingClientRect(),f=u.right,a=u.left,d=o.current.offsetWidth,c=e.current.offsetHeight,p=e.current.offsetWidth,h=d-p<0?(d-p)/2:-(d-p)/2;return d>p&&l-f<(d-p)/2?h-=(d-p)/2-(l-f)+4:d>p&&a-s<(d-p)/2&&(h+=(d-p)/2-(a-s)+4),{top:c+10,left:h}}return{}}({labelRef:o,tooltipRef:r,anchorRef:i});case exports.ITooltipV2Position.AUTO:return function(t){var e=t.labelRef,o=t.tooltipRef,r=t.anchorRef,i=(null==r?void 0:r.current)||document.body;if((null==o?void 0:o.current)&&(null==e?void 0:e.current)&&i){var n=i.getBoundingClientRect(),l=o.current.getBoundingClientRect(),s=n.right,u=n.bottom,f=l.right,a=l.bottom,d=o.current.offsetHeight,c=o.current.offsetWidth,p=e.current.offsetHeight,h=e.current.offsetWidth;return f>s&&a>u?{left:c-h<0?c-h:-(c-h),top:-(d+10)}:a>u?{top:-(d+10)}:f>s?{left:c-h<0?c-h:-(c-h),top:p+10}:{top:p+10}}return{}}({labelRef:o,tooltipRef:r,anchorRef:i});default:return{left:u,top:-(n/2-s/2)}}}},v=function(t){var e=t.position,o=t.labelRef,r=t.tooltipRef,i=t.anchorRef;if(t.theme,(null==o?void 0:o.current)&&(null==r?void 0:r.current)){var n=o.current.offsetWidth,l=o.current.offsetHeight;switch(e){case exports.ITooltipV2Position.TOP:return{top:"-11px",left:n/2};case exports.ITooltipV2Position.BOTTOM:return{rotate:"180deg",top:l+5,left:n/2};case exports.ITooltipV2Position.LEFT:return{rotate:"-90deg",top:0,left:"-16px"};case exports.ITooltipV2Position.RIGHT:return{rotate:"90deg",top:0,left:n-1};case exports.ITooltipV2Position.AUTO:return function(t){var e=t.labelRef,o=t.tooltipRef,r=t.anchorRef,i=(null==r?void 0:r.current)||document.body;if((null==o?void 0:o.current)&&(null==e?void 0:e.current)&&i){var n=i.getBoundingClientRect(),l=o.current.getBoundingClientRect(),s=n.right,u=n.bottom,f=l.right,a=l.bottom,d=e.current.offsetHeight,c=e.current.offsetWidth;return f>s&&a>u||a>u?{top:"-11px",left:c/2}:{rotate:"180deg",left:c/2,top:d+5}}return{}}({labelRef:o,tooltipRef:r,anchorRef:i});default:return{rotate:"90deg",top:0,left:n}}}return{}},b=function(e){var o=e.borderSize,r=e.position,i=e.labelRef,n=e.tooltipRef,l=e.anchorRef,s=e.theme,u=g({position:r,labelRef:i,tooltipRef:n,anchorRef:l,theme:s})||{};return t.__assign(t.__assign({},u),function(t,e){switch(t){case exports.ITooltipV2BorderSize.XS:return{borderRadius:e.border.radius[4]};case exports.ITooltipV2BorderSize.SM:return{borderRadius:e.border.radius[6]};case exports.ITooltipV2BorderSize.MD:return{borderRadius:e.border.radius[8]};case exports.ITooltipV2BorderSize.LG:return{borderRadius:e.border.radius[16]};case exports.ITooltipV2BorderSize.XL:return{borderRadius:e.border.radius[32]};default:return{borderRadius:e.border.radius[8]}}}(o,s))},T=h.default.div((function(e){var o=e.borderRadius,r=e.width,i=e.left,n=e.top,l=e.theme,s=e.visibility,u=e.css;return t.__assign({backgroundColor:l.color.background.defaultDarkest,position:"absolute",zIndex:l.zIndex.tooltip,borderRadius:o,width:r,left:i,top:n,visibility:s},u)})),x=h.default.div((function(e){var o=e.rotate,r=e.top,i=e.left,n=e.theme,l=e.visibility,s=e.css;return t.__assign({rotate:o,top:r,left:i,zIndex:n.zIndex.tooltip,position:"absolute",width:"fit-content",display:"flex",visibility:l},s)}));exports.TooltipV2=function(l){var f=l.children,a=l.labelContainer,d=l.borderSize,c=void 0===d?exports.ITooltipV2BorderSize.MD:d,p=l.position,h=void 0===p?exports.ITooltipV2Position.RIGHT:p,g=l.width,m=l.anchorRef,E=l.tooltipContainerRef,V=l.open,_=l.enableTooltipContainerHovering,I=void 0!==_&&_,P=l.styleConfig,B=void 0===P?{}:P,C=l.enableAnimation,H=void 0!==C&&C,M=r.useTheme(),O=B.root,S=B.labelContainer,y=B.tooltipArrowContainer,z=B.tooltipContainer,L=B.toottipArrowIcon,w=o.useState(V||!1),q=w[0],A=w[1],W=o.useState({}),j=W[0],Y=W[1],G=o.useState({}),D=G[0],X=G[1],F=o.useRef(null),N=o.useRef(null),k=R.default(E,N),U=function(){var t=b({borderSize:c,position:h,labelRef:F,tooltipRef:N,anchorRef:m,theme:M}),e=v({position:h,labelRef:F,tooltipRef:N,anchorRef:m,theme:M});Y(t),X(e)};o.useEffect((function(){V?(U(),A(!0)):(Y({}),X({}),A(!1))}),[V]);var J,K=function(t){return function(e){if(!V)if(t===exports.HOVER_TYPE.ENTER)U(),A(!0);else{if(I&&function(t){var e,o,r,i,n={right:0,left:0,bottom:0,top:0},l=null!==(o=null===(e=N.current)||void 0===e?void 0:e.getBoundingClientRect())&&void 0!==o?o:n,s=null!==(i=null===(r=F.current)||void 0===r?void 0:r.getBoundingClientRect())&&void 0!==i?i:n,u={r:Math.floor(Math.max(l.right,s.left)),l:Math.floor(Math.min(l.left,s.right)),b:Math.floor(Math.max(l.bottom,s.top)),t:Math.floor(Math.min(l.top,s.bottom))},f=u.r,a=u.l,d=u.b,c=u.t,p=t.clientX+1,h=t.clientY+1;return f>=p&&a<=p&&c<=h&&d>=h}(e))return;Y({}),X({}),A(!1)}}};return e.jsxs(i.Container,t.__assign({position:"relative"},O,{children:[e.jsx(i.Container,t.__assign({onMouseEnter:K(exports.HOVER_TYPE.ENTER),onMouseLeave:K(exports.HOVER_TYPE.LEAVE),ref:F,width:"fit-content"},S,{children:a})),!!f&&e.jsxs(o.Fragment,{children:[(J=e.jsx(T,t.__assign({},j,{visibility:q&&!u.isEmpty(j)?"visible":"hidden",width:g||"fit-content",theme:M,ref:k,onMouseLeave:K(exports.HOVER_TYPE.LEAVE)},z,{children:f})),H?e.jsx(n.Transition,t.__assign({type:"slide_fade",in:q},{children:J})):J)," ",function(){var o=e.jsx(x,t.__assign({},D,{visibility:q&&!u.isEmpty(D)?"visible":"hidden",theme:M},y,{children:e.jsx(s.TooltipChevronDown,t.__assign({},L))}));return H?e.jsx(n.Transition,t.__assign({type:"slide_fade",in:q},{children:o})):o}()]})]}))};
 //# sourceMappingURL=ct-design-tooltip-v2.browser.cjs.js.map

dist/ct-design-tooltip-v2.browser.esm.js

@@ -1,2 +0,2 @@
-import{__assign as t}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o,useRef as i,useEffect as n,Fragment as l}from"react";import{useTheme as f}from"@cleartrip/ct-design-theme";import{Container as u}from"@cleartrip/ct-design-container";import c from"styled-components";import{TooltipChevronDown as a}from"@cleartrip/ct-design-icons";import{isEmpty as d}from"@cleartrip/ct-design-common-utils";import s from"@cleartrip/ct-design-use-merge-refs";var h,p,R;!function(t){t.ENTER="ENTER",t.LEAVE="LEAVE"}(h||(h={})),function(t){t.XS="xs",t.SM="sm",t.MD="md",t.LG="lg",t.XL="xl"}(p||(p={})),function(t){t.AUTO="auto",t.LEFT="left",t.RIGHT="right",t.TOP="top",t.BOTTOM="bottom"}(R||(R={}));var b=function(t){var e=t.position,r=t.labelRef,o=t.tooltipRef,i=t.anchorRef;if(t.theme,(null==r?void 0:r.current)&&(null==o?void 0:o.current)){var n=o.current.offsetHeight,l=o.current.offsetWidth,f=r.current.offsetHeight,u=r.current.offsetWidth;switch(e){case R.LEFT:return{left:-(l+10),top:-(n/2-f/2)};case R.RIGHT:return{left:u+10,top:-(n/2-f/2)};case R.TOP:return function(t){var e=t.labelRef,r=t.tooltipRef,o=t.anchorRef,i=(null==o?void 0:o.current)||document.body;if((null==e?void 0:e.current)&&(null==r?void 0:r.current)){var n=i.getBoundingClientRect(),l=n.right,f=n.left,u=e.current.getBoundingClientRect(),c=u.right,a=u.left,d=r.current.offsetWidth,s=r.current.offsetHeight,h=e.current.offsetWidth,p=d-h<0?(d-h)/2:-(d-h)/2;return d>h&&l-c<(d-h)/2?p-=(d-h)/2-(l-c)+4:d>h&&a-f<(d-h)/2&&(p+=(d-h)/2-(a-f)+4),{top:-(s+10),left:p}}return{}}({labelRef:r,tooltipRef:o,anchorRef:i});case R.BOTTOM:return function(t){var e=t.labelRef,r=t.tooltipRef,o=t.anchorRef,i=(null==o?void 0:o.current)||document.body;if((null==e?void 0:e.current)&&(null==r?void 0:r.current)){var n=i.getBoundingClientRect(),l=n.right,f=n.left,u=e.current.getBoundingClientRect(),c=u.right,a=u.left,d=r.current.offsetWidth,s=e.current.offsetHeight,h=e.current.offsetWidth,p=d-h<0?(d-h)/2:-(d-h)/2;return d>h&&l-c<(d-h)/2?p-=(d-h)/2-(l-c)+4:d>h&&a-f<(d-h)/2&&(p+=(d-h)/2-(a-f)+4),{top:s+10,left:p}}return{}}({labelRef:r,tooltipRef:o,anchorRef:i});case R.AUTO:return function(t){var e=t.labelRef,r=t.tooltipRef,o=t.anchorRef,i=(null==o?void 0:o.current)||document.body;if((null==r?void 0:r.current)&&(null==e?void 0:e.current)&&i){var n=i.getBoundingClientRect(),l=r.current.getBoundingClientRect(),f=n.right,u=n.bottom,c=l.right,a=l.bottom,d=r.current.offsetHeight,s=r.current.offsetWidth,h=e.current.offsetHeight,p=e.current.offsetWidth;return c>f&&a>u?{left:s-p<0?s-p:-(s-p),top:-(d+10)}:a>u?{top:-(d+10)}:c>f?{left:s-p<0?s-p:-(s-p),top:h+10}:{top:h+10}}return{}}({labelRef:r,tooltipRef:o,anchorRef:i});default:return{left:u,top:-(n/2-f/2)}}}},v=function(t){var e=t.position,r=t.labelRef,o=t.tooltipRef,i=t.anchorRef;if(t.theme,(null==r?void 0:r.current)&&(null==o?void 0:o.current)){var n=r.current.offsetWidth,l=r.current.offsetHeight;switch(e){case R.TOP:return{top:"-11px",left:n/2};case R.BOTTOM:return{rotate:"180deg",top:l+5,left:n/2};case R.LEFT:return{rotate:"-90deg",top:0,left:"-16px"};case R.RIGHT:return{rotate:"90deg",top:0,left:n-1};case R.AUTO:return function(t){var e=t.labelRef,r=t.tooltipRef,o=t.anchorRef,i=(null==o?void 0:o.current)||document.body;if((null==r?void 0:r.current)&&(null==e?void 0:e.current)&&i){var n=i.getBoundingClientRect(),l=r.current.getBoundingClientRect(),f=n.right,u=n.bottom,c=l.right,a=l.bottom,d=e.current.offsetHeight,s=e.current.offsetWidth;return c>f&&a>u||a>u?{top:"-11px",left:s/2}:{rotate:"180deg",left:s/2,top:d+5}}return{}}({labelRef:r,tooltipRef:o,anchorRef:i});default:return{rotate:"90deg",top:0,left:n}}}return{}},g=function(e){var r=e.borderSize,o=e.position,i=e.labelRef,n=e.tooltipRef,l=e.anchorRef,f=e.theme,u=b({position:o,labelRef:i,tooltipRef:n,anchorRef:l,theme:f})||{};return t(t({},u),function(t,e){switch(t){case p.XS:return{borderRadius:e.border.radius[4]};case p.SM:return{borderRadius:e.border.radius[6]};case p.MD:return{borderRadius:e.border.radius[8]};case p.LG:return{borderRadius:e.border.radius[16]};case p.XL:return{borderRadius:e.border.radius[32]};default:return{borderRadius:e.border.radius[8]}}}(r,f))},m=c.div((function(e){var r=e.borderRadius,o=e.width,i=e.left,n=e.top,l=e.theme,f=e.visibility,u=e.css;return t({backgroundColor:l.color.background.defaultDarkest,position:"absolute",zIndex:l.zIndex.tooltip,borderRadius:r,width:o,left:i,top:n,visibility:f},u)})),T=c.div((function(e){var r=e.rotate,o=e.top,i=e.left,n=e.theme,l=e.visibility,f=e.css;return t({rotate:r,top:o,left:i,zIndex:n.zIndex.tooltip,position:"absolute",width:"fit-content",display:"flex",visibility:l},f)})),E=function(c){var b=c.children,E=c.labelContainer,M=c.borderSize,C=void 0===M?p.MD:M,x=c.position,y=void 0===x?R.RIGHT:x,B=c.width,H=c.anchorRef,L=c.tooltipContainerRef,O=c.open,w=c.enableTooltipContainerHovering,W=void 0!==w&&w,A=c.styleConfig,I=void 0===A?{}:A,z=f(),S=I.root,G=I.labelContainer,X=I.tooltipArrowContainer,D=I.tooltipContainer,N=I.toottipArrowIcon,V=o(O||!1),k=V[0],F=V[1],P=o({}),U=P[0],j=P[1],Y=o({}),q=Y[0],J=Y[1],K=i(null),Q=i(null),Z=s(L,Q),$=function(){var t=g({borderSize:C,position:y,labelRef:K,tooltipRef:Q,anchorRef:H,theme:z}),e=v({position:y,labelRef:K,tooltipRef:Q,anchorRef:H,theme:z});j(t),J(e)};n((function(){O?($(),F(!0)):(j({}),J({}),F(!1))}),[O]);var _=function(t){return function(e){if(!O)if(t===h.ENTER)$(),F(!0);else{if(W&&function(t){var e,r,o,i,n={right:0,left:0,bottom:0,top:0},l=null!==(r=null===(e=Q.current)||void 0===e?void 0:e.getBoundingClientRect())&&void 0!==r?r:n,f=null!==(i=null===(o=K.current)||void 0===o?void 0:o.getBoundingClientRect())&&void 0!==i?i:n,u={r:Math.floor(Math.max(l.right,f.left)),l:Math.floor(Math.min(l.left,f.right)),b:Math.floor(Math.max(l.bottom,f.top)),t:Math.floor(Math.min(l.top,f.bottom))},c=u.r,a=u.l,d=u.b,s=u.t,h=t.clientX+1,p=t.clientY+1;return c>=h&&a<=h&&s<=p&&d>=p}(e))return;j({}),J({}),F(!1)}}};return e(u,t({position:"relative"},S,{children:[r(u,t({onMouseEnter:_(h.ENTER),onMouseLeave:_(h.LEAVE),ref:K,width:"fit-content"},G,{children:E})),!!b&&e(l,{children:[r(m,t({},U,{visibility:k&&!d(U)?"visible":"hidden",width:B||"fit-content",theme:z,ref:Z,onMouseLeave:_(h.LEAVE)},D,{children:b})),r(T,t({},q,{visibility:k&&!d(q)?"visible":"hidden",theme:z},X,{children:r(a,t({},N))}))]})]}))};export{h as HOVER_TYPE,p as ITooltipV2BorderSize,R as ITooltipV2Position,E as TooltipV2};
+import{__assign as t}from"tslib";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as o,useRef as i,useEffect as n,Fragment as l}from"react";import{useTheme as f}from"@cleartrip/ct-design-theme";import{Container as u}from"@cleartrip/ct-design-container";import{Transition as c}from"@cleartrip/ct-design-transition";import a from"styled-components";import{TooltipChevronDown as d}from"@cleartrip/ct-design-icons";import{isEmpty as s}from"@cleartrip/ct-design-common-utils";import h from"@cleartrip/ct-design-use-merge-refs";var p,R,v;!function(t){t.ENTER="ENTER",t.LEAVE="LEAVE"}(p||(p={})),function(t){t.XS="xs",t.SM="sm",t.MD="md",t.LG="lg",t.XL="xl"}(R||(R={})),function(t){t.AUTO="auto",t.LEFT="left",t.RIGHT="right",t.TOP="top",t.BOTTOM="bottom"}(v||(v={}));var b=function(t){var e=t.position,r=t.labelRef,o=t.tooltipRef,i=t.anchorRef;if(t.theme,(null==r?void 0:r.current)&&(null==o?void 0:o.current)){var n=o.current.offsetHeight,l=o.current.offsetWidth,f=r.current.offsetHeight,u=r.current.offsetWidth;switch(e){case v.LEFT:return{left:-(l+10),top:-(n/2-f/2)};case v.RIGHT:return{left:u+10,top:-(n/2-f/2)};case v.TOP:return function(t){var e=t.labelRef,r=t.tooltipRef,o=t.anchorRef,i=(null==o?void 0:o.current)||document.body;if((null==e?void 0:e.current)&&(null==r?void 0:r.current)){var n=i.getBoundingClientRect(),l=n.right,f=n.left,u=e.current.getBoundingClientRect(),c=u.right,a=u.left,d=r.current.offsetWidth,s=r.current.offsetHeight,h=e.current.offsetWidth,p=d-h<0?(d-h)/2:-(d-h)/2;return d>h&&l-c<(d-h)/2?p-=(d-h)/2-(l-c)+4:d>h&&a-f<(d-h)/2&&(p+=(d-h)/2-(a-f)+4),{top:-(s+10),left:p}}return{}}({labelRef:r,tooltipRef:o,anchorRef:i});case v.BOTTOM:return function(t){var e=t.labelRef,r=t.tooltipRef,o=t.anchorRef,i=(null==o?void 0:o.current)||document.body;if((null==e?void 0:e.current)&&(null==r?void 0:r.current)){var n=i.getBoundingClientRect(),l=n.right,f=n.left,u=e.current.getBoundingClientRect(),c=u.right,a=u.left,d=r.current.offsetWidth,s=e.current.offsetHeight,h=e.current.offsetWidth,p=d-h<0?(d-h)/2:-(d-h)/2;return d>h&&l-c<(d-h)/2?p-=(d-h)/2-(l-c)+4:d>h&&a-f<(d-h)/2&&(p+=(d-h)/2-(a-f)+4),{top:s+10,left:p}}return{}}({labelRef:r,tooltipRef:o,anchorRef:i});case v.AUTO:return function(t){var e=t.labelRef,r=t.tooltipRef,o=t.anchorRef,i=(null==o?void 0:o.current)||document.body;if((null==r?void 0:r.current)&&(null==e?void 0:e.current)&&i){var n=i.getBoundingClientRect(),l=r.current.getBoundingClientRect(),f=n.right,u=n.bottom,c=l.right,a=l.bottom,d=r.current.offsetHeight,s=r.current.offsetWidth,h=e.current.offsetHeight,p=e.current.offsetWidth;return c>f&&a>u?{left:s-p<0?s-p:-(s-p),top:-(d+10)}:a>u?{top:-(d+10)}:c>f?{left:s-p<0?s-p:-(s-p),top:h+10}:{top:h+10}}return{}}({labelRef:r,tooltipRef:o,anchorRef:i});default:return{left:u,top:-(n/2-f/2)}}}},g=function(t){var e=t.position,r=t.labelRef,o=t.tooltipRef,i=t.anchorRef;if(t.theme,(null==r?void 0:r.current)&&(null==o?void 0:o.current)){var n=r.current.offsetWidth,l=r.current.offsetHeight;switch(e){case v.TOP:return{top:"-11px",left:n/2};case v.BOTTOM:return{rotate:"180deg",top:l+5,left:n/2};case v.LEFT:return{rotate:"-90deg",top:0,left:"-16px"};case v.RIGHT:return{rotate:"90deg",top:0,left:n-1};case v.AUTO:return function(t){var e=t.labelRef,r=t.tooltipRef,o=t.anchorRef,i=(null==o?void 0:o.current)||document.body;if((null==r?void 0:r.current)&&(null==e?void 0:e.current)&&i){var n=i.getBoundingClientRect(),l=r.current.getBoundingClientRect(),f=n.right,u=n.bottom,c=l.right,a=l.bottom,d=e.current.offsetHeight,s=e.current.offsetWidth;return c>f&&a>u||a>u?{top:"-11px",left:s/2}:{rotate:"180deg",left:s/2,top:d+5}}return{}}({labelRef:r,tooltipRef:o,anchorRef:i});default:return{rotate:"90deg",top:0,left:n}}}return{}},m=function(e){var r=e.borderSize,o=e.position,i=e.labelRef,n=e.tooltipRef,l=e.anchorRef,f=e.theme,u=b({position:o,labelRef:i,tooltipRef:n,anchorRef:l,theme:f})||{};return t(t({},u),function(t,e){switch(t){case R.XS:return{borderRadius:e.border.radius[4]};case R.SM:return{borderRadius:e.border.radius[6]};case R.MD:return{borderRadius:e.border.radius[8]};case R.LG:return{borderRadius:e.border.radius[16]};case R.XL:return{borderRadius:e.border.radius[32]};default:return{borderRadius:e.border.radius[8]}}}(r,f))},T=a.div((function(e){var r=e.borderRadius,o=e.width,i=e.left,n=e.top,l=e.theme,f=e.visibility,u=e.css;return t({backgroundColor:l.color.background.defaultDarkest,position:"absolute",zIndex:l.zIndex.tooltip,borderRadius:r,width:o,left:i,top:n,visibility:f},u)})),E=a.div((function(e){var r=e.rotate,o=e.top,i=e.left,n=e.theme,l=e.visibility,f=e.css;return t({rotate:r,top:o,left:i,zIndex:n.zIndex.tooltip,position:"absolute",width:"fit-content",display:"flex",visibility:l},f)})),M=function(a){var b=a.children,M=a.labelContainer,C=a.borderSize,y=void 0===C?R.MD:C,x=a.position,B=void 0===x?v.RIGHT:x,H=a.width,L=a.anchorRef,O=a.tooltipContainerRef,w=a.open,A=a.enableTooltipContainerHovering,W=void 0!==A&&A,I=a.styleConfig,z=void 0===I?{}:I,S=a.enableAnimation,G=void 0!==S&&S,X=f(),D=z.root,N=z.labelContainer,V=z.tooltipArrowContainer,k=z.tooltipContainer,F=z.toottipArrowIcon,P=o(w||!1),U=P[0],_=P[1],j=o({}),Y=j[0],q=j[1],J=o({}),K=J[0],Q=J[1],Z=i(null),$=i(null),tt=h(O,$),et=function(){var t=m({borderSize:y,position:B,labelRef:Z,tooltipRef:$,anchorRef:L,theme:X}),e=g({position:B,labelRef:Z,tooltipRef:$,anchorRef:L,theme:X});q(t),Q(e)};n((function(){w?(et(),_(!0)):(q({}),Q({}),_(!1))}),[w]);var rt,ot=function(t){return function(e){if(!w)if(t===p.ENTER)et(),_(!0);else{if(W&&function(t){var e,r,o,i,n={right:0,left:0,bottom:0,top:0},l=null!==(r=null===(e=$.current)||void 0===e?void 0:e.getBoundingClientRect())&&void 0!==r?r:n,f=null!==(i=null===(o=Z.current)||void 0===o?void 0:o.getBoundingClientRect())&&void 0!==i?i:n,u={r:Math.floor(Math.max(l.right,f.left)),l:Math.floor(Math.min(l.left,f.right)),b:Math.floor(Math.max(l.bottom,f.top)),t:Math.floor(Math.min(l.top,f.bottom))},c=u.r,a=u.l,d=u.b,s=u.t,h=t.clientX+1,p=t.clientY+1;return c>=h&&a<=h&&s<=p&&d>=p}(e))return;q({}),Q({}),_(!1)}}};return e(u,t({position:"relative"},D,{children:[r(u,t({onMouseEnter:ot(p.ENTER),onMouseLeave:ot(p.LEAVE),ref:Z,width:"fit-content"},N,{children:M})),!!b&&e(l,{children:[(rt=r(T,t({},Y,{visibility:U&&!s(Y)?"visible":"hidden",width:H||"fit-content",theme:X,ref:tt,onMouseLeave:ot(p.LEAVE)},k,{children:b})),G?r(c,t({type:"slide_fade",in:U},{children:rt})):rt)," ",function(){var e=r(E,t({},K,{visibility:U&&!s(K)?"visible":"hidden",theme:X},V,{children:r(d,t({},F))}));return G?r(c,t({type:"slide_fade",in:U},{children:e})):e}()]})]}))};export{p as HOVER_TYPE,R as ITooltipV2BorderSize,v as ITooltipV2Position,M as TooltipV2};
 //# sourceMappingURL=ct-design-tooltip-v2.browser.esm.js.map

dist/ct-design-tooltip-v2.cjs.js

@@ -8,2 +8,3 @@ 'use strict';
 var ctDesignContainer = require('@cleartrip/ct-design-container');
+var ctDesignTransition = require('@cleartrip/ct-design-transition');
 var styled = require('styled-components');
@@ -311,8 +312,8 @@ var ctDesignIcons = require('@cleartrip/ct-design-icons');
 var TooltipV2 = function (_a) {
-    var children = _a.children, labelContainer = _a.labelContainer, _b = _a.borderSize, borderSize = _b === void 0 ? exports.ITooltipV2BorderSize.MD : _b, _c = _a.position, position = _c === void 0 ? exports.ITooltipV2Position.RIGHT : _c, width = _a.width, anchorRef = _a.anchorRef, tooltipContainerRef = _a.tooltipContainerRef, open = _a.open, _d = _a.enableTooltipContainerHovering, enableTooltipContainerHovering = _d === void 0 ? false : _d, _e = _a.styleConfig, styleConfig = _e === void 0 ? {} : _e;
+    var children = _a.children, labelContainer = _a.labelContainer, _b = _a.borderSize, borderSize = _b === void 0 ? exports.ITooltipV2BorderSize.MD : _b, _c = _a.position, position = _c === void 0 ? exports.ITooltipV2Position.RIGHT : _c, width = _a.width, anchorRef = _a.anchorRef, tooltipContainerRef = _a.tooltipContainerRef, open = _a.open, _d = _a.enableTooltipContainerHovering, enableTooltipContainerHovering = _d === void 0 ? false : _d, _e = _a.styleConfig, styleConfig = _e === void 0 ? {} : _e, _f = _a.enableAnimation, enableAnimation = _f === void 0 ? false : _f;
     var theme = ctDesignTheme.useTheme();
     var root = styleConfig.root, labelContainerStyleConfig = styleConfig.labelContainer, tooltipArrowContainer = styleConfig.tooltipArrowContainer, tooltipContainer = styleConfig.tooltipContainer, toottipArrowIcon = styleConfig.toottipArrowIcon;
-    var _f = react.useState(open || false), isHovering = _f[0], setIsHovering = _f[1];
-    var _g = react.useState({}), tooltipStyles = _g[0], setTooltipStyles = _g[1];
-    var _h = react.useState({}), tooltipArrowStyles = _h[0], setTooltipArrowStyles = _h[1];
+    var _g = react.useState(open || false), isHovering = _g[0], setIsHovering = _g[1];
+    var _h = react.useState({}), tooltipStyles = _h[0], setTooltipStyles = _h[1];
+    var _j = react.useState({}), tooltipArrowStyles = _j[0], setTooltipArrowStyles = _j[1];
     var labelRef = react.useRef(null);
@@ -381,3 +382,17 @@ var tooltipRef = react.useRef(null);
     }; };
-    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ position: 'relative' }, root, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ onMouseEnter: onHover(exports.HOVER_TYPE.ENTER), onMouseLeave: onHover(exports.HOVER_TYPE.LEAVE), ref: labelRef, width: 'fit-content' }, labelContainerStyleConfig, { children: labelContainer })), !!children && (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(StyledTooltipV2, tslib.__assign({}, tooltipStyles, { visibility: isHovering && !ctDesignCommonUtils.isEmpty(tooltipStyles) ? 'visible' : 'hidden', width: width || 'fit-content', theme: theme, ref: combinedTooltipRef, onMouseLeave: onHover(exports.HOVER_TYPE.LEAVE) }, tooltipContainer, { children: children })), jsxRuntime.jsx(StyledTooltipV2Arrow, tslib.__assign({}, tooltipArrowStyles, { visibility: isHovering && !ctDesignCommonUtils.isEmpty(tooltipArrowStyles) ? 'visible' : 'hidden', theme: theme }, tooltipArrowContainer, { children: jsxRuntime.jsx(ctDesignIcons.TooltipChevronDown, tslib.__assign({}, toottipArrowIcon)) }))] }))] })));
+    var renderTooltipContainer = function () {
+        var content = (jsxRuntime.jsx(StyledTooltipV2, tslib.__assign({}, tooltipStyles, { visibility: isHovering && !ctDesignCommonUtils.isEmpty(tooltipStyles) ? 'visible' : 'hidden', width: width || 'fit-content', theme: theme, ref: combinedTooltipRef, onMouseLeave: onHover(exports.HOVER_TYPE.LEAVE) }, tooltipContainer, { children: children })));
+        if (enableAnimation) {
+            return (jsxRuntime.jsx(ctDesignTransition.Transition, tslib.__assign({ type: 'slide_fade', in: isHovering }, { children: content })));
+        }
+        return content;
+    };
+    var renderTooltipArrowContainer = function () {
+        var content = (jsxRuntime.jsx(StyledTooltipV2Arrow, tslib.__assign({}, tooltipArrowStyles, { visibility: isHovering && !ctDesignCommonUtils.isEmpty(tooltipArrowStyles) ? 'visible' : 'hidden', theme: theme }, tooltipArrowContainer, { children: jsxRuntime.jsx(ctDesignIcons.TooltipChevronDown, tslib.__assign({}, toottipArrowIcon)) })));
+        if (enableAnimation) {
+            return (jsxRuntime.jsx(ctDesignTransition.Transition, tslib.__assign({ type: 'slide_fade', in: isHovering }, { children: content })));
+        }
+        return content;
+    };
+    return (jsxRuntime.jsxs(ctDesignContainer.Container, tslib.__assign({ position: 'relative' }, root, { children: [jsxRuntime.jsx(ctDesignContainer.Container, tslib.__assign({ onMouseEnter: onHover(exports.HOVER_TYPE.ENTER), onMouseLeave: onHover(exports.HOVER_TYPE.LEAVE), ref: labelRef, width: 'fit-content' }, labelContainerStyleConfig, { children: labelContainer })), !!children && (jsxRuntime.jsxs(react.Fragment, { children: [renderTooltipContainer(), " ", renderTooltipArrowContainer()] }))] })));
 };
@@ -384,0 +399,0 @@

dist/ct-design-tooltip-v2.esm.js

@@ -6,2 +6,3 @@ import { __assign } from 'tslib';
 import { Container } from '@cleartrip/ct-design-container';
+import { Transition } from '@cleartrip/ct-design-transition';
 import styled from 'styled-components';
@@ -304,8 +305,8 @@ import { TooltipChevronDown } from '@cleartrip/ct-design-icons';
 var TooltipV2 = function (_a) {
-    var children = _a.children, labelContainer = _a.labelContainer, _b = _a.borderSize, borderSize = _b === void 0 ? ITooltipV2BorderSize.MD : _b, _c = _a.position, position = _c === void 0 ? ITooltipV2Position.RIGHT : _c, width = _a.width, anchorRef = _a.anchorRef, tooltipContainerRef = _a.tooltipContainerRef, open = _a.open, _d = _a.enableTooltipContainerHovering, enableTooltipContainerHovering = _d === void 0 ? false : _d, _e = _a.styleConfig, styleConfig = _e === void 0 ? {} : _e;
+    var children = _a.children, labelContainer = _a.labelContainer, _b = _a.borderSize, borderSize = _b === void 0 ? ITooltipV2BorderSize.MD : _b, _c = _a.position, position = _c === void 0 ? ITooltipV2Position.RIGHT : _c, width = _a.width, anchorRef = _a.anchorRef, tooltipContainerRef = _a.tooltipContainerRef, open = _a.open, _d = _a.enableTooltipContainerHovering, enableTooltipContainerHovering = _d === void 0 ? false : _d, _e = _a.styleConfig, styleConfig = _e === void 0 ? {} : _e, _f = _a.enableAnimation, enableAnimation = _f === void 0 ? false : _f;
     var theme = useTheme();
     var root = styleConfig.root, labelContainerStyleConfig = styleConfig.labelContainer, tooltipArrowContainer = styleConfig.tooltipArrowContainer, tooltipContainer = styleConfig.tooltipContainer, toottipArrowIcon = styleConfig.toottipArrowIcon;
-    var _f = useState(open || false), isHovering = _f[0], setIsHovering = _f[1];
-    var _g = useState({}), tooltipStyles = _g[0], setTooltipStyles = _g[1];
-    var _h = useState({}), tooltipArrowStyles = _h[0], setTooltipArrowStyles = _h[1];
+    var _g = useState(open || false), isHovering = _g[0], setIsHovering = _g[1];
+    var _h = useState({}), tooltipStyles = _h[0], setTooltipStyles = _h[1];
+    var _j = useState({}), tooltipArrowStyles = _j[0], setTooltipArrowStyles = _j[1];
     var labelRef = useRef(null);
@@ -374,3 +375,17 @@ var tooltipRef = useRef(null);
     }; };
-    return (jsxs(Container, __assign({ position: 'relative' }, root, { children: [jsx(Container, __assign({ onMouseEnter: onHover(HOVER_TYPE.ENTER), onMouseLeave: onHover(HOVER_TYPE.LEAVE), ref: labelRef, width: 'fit-content' }, labelContainerStyleConfig, { children: labelContainer })), !!children && (jsxs(Fragment, { children: [jsx(StyledTooltipV2, __assign({}, tooltipStyles, { visibility: isHovering && !isEmpty(tooltipStyles) ? 'visible' : 'hidden', width: width || 'fit-content', theme: theme, ref: combinedTooltipRef, onMouseLeave: onHover(HOVER_TYPE.LEAVE) }, tooltipContainer, { children: children })), jsx(StyledTooltipV2Arrow, __assign({}, tooltipArrowStyles, { visibility: isHovering && !isEmpty(tooltipArrowStyles) ? 'visible' : 'hidden', theme: theme }, tooltipArrowContainer, { children: jsx(TooltipChevronDown, __assign({}, toottipArrowIcon)) }))] }))] })));
+    var renderTooltipContainer = function () {
+        var content = (jsx(StyledTooltipV2, __assign({}, tooltipStyles, { visibility: isHovering && !isEmpty(tooltipStyles) ? 'visible' : 'hidden', width: width || 'fit-content', theme: theme, ref: combinedTooltipRef, onMouseLeave: onHover(HOVER_TYPE.LEAVE) }, tooltipContainer, { children: children })));
+        if (enableAnimation) {
+            return (jsx(Transition, __assign({ type: 'slide_fade', in: isHovering }, { children: content })));
+        }
+        return content;
+    };
+    var renderTooltipArrowContainer = function () {
+        var content = (jsx(StyledTooltipV2Arrow, __assign({}, tooltipArrowStyles, { visibility: isHovering && !isEmpty(tooltipArrowStyles) ? 'visible' : 'hidden', theme: theme }, tooltipArrowContainer, { children: jsx(TooltipChevronDown, __assign({}, toottipArrowIcon)) })));
+        if (enableAnimation) {
+            return (jsx(Transition, __assign({ type: 'slide_fade', in: isHovering }, { children: content })));
+        }
+        return content;
+    };
+    return (jsxs(Container, __assign({ position: 'relative' }, root, { children: [jsx(Container, __assign({ onMouseEnter: onHover(HOVER_TYPE.ENTER), onMouseLeave: onHover(HOVER_TYPE.LEAVE), ref: labelRef, width: 'fit-content' }, labelContainerStyleConfig, { children: labelContainer })), !!children && (jsxs(Fragment, { children: [renderTooltipContainer(), " ", renderTooltipArrowContainer()] }))] })));
 };
@@ -377,0 +392,0 @@

dist/ct-design-tooltip-v2.umd.js

 (function (global, factory) {
-    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-theme'), require('@cleartrip/ct-design-container'), require('styled-components'), require('@cleartrip/ct-design-icons'), require('@cleartrip/ct-design-common-utils'), require('@cleartrip/ct-design-use-merge-refs')) :
-    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-theme', '@cleartrip/ct-design-container', 'styled-components', '@cleartrip/ct-design-icons', '@cleartrip/ct-design-common-utils', '@cleartrip/ct-design-use-merge-refs'], factory) :
-    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemTooltipV2 = {}, global.jsxRuntime, global.React, global.ctDesignTheme, global.ctDesignContainer, global.styled, global.ctDesignIcons, global.ctDesignCommonUtils, global.useMergeRefs));
-})(this, (function (exports, jsxRuntime, react, ctDesignTheme, ctDesignContainer, styled, ctDesignIcons, ctDesignCommonUtils, useMergeRefs) { 'use strict';
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react/jsx-runtime'), require('react'), require('@cleartrip/ct-design-theme'), require('@cleartrip/ct-design-container'), require('@cleartrip/ct-design-transition'), require('styled-components'), require('@cleartrip/ct-design-icons'), require('@cleartrip/ct-design-common-utils'), require('@cleartrip/ct-design-use-merge-refs')) :
+    typeof define === 'function' && define.amd ? define(['exports', 'react/jsx-runtime', 'react', '@cleartrip/ct-design-theme', '@cleartrip/ct-design-container', '@cleartrip/ct-design-transition', 'styled-components', '@cleartrip/ct-design-icons', '@cleartrip/ct-design-common-utils', '@cleartrip/ct-design-use-merge-refs'], factory) :
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.CTDesignSystemTooltipV2 = {}, global.jsxRuntime, global.React, global.ctDesignTheme, global.ctDesignContainer, global.ctDesignTransition, global.styled, global.ctDesignIcons, global.ctDesignCommonUtils, global.useMergeRefs));
+})(this, (function (exports, jsxRuntime, react, ctDesignTheme, ctDesignContainer, ctDesignTransition, styled, ctDesignIcons, ctDesignCommonUtils, useMergeRefs) { 'use strict';
 
@@ -335,8 +335,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
     var TooltipV2 = function (_a) {
-        var children = _a.children, labelContainer = _a.labelContainer, _b = _a.borderSize, borderSize = _b === void 0 ? exports.ITooltipV2BorderSize.MD : _b, _c = _a.position, position = _c === void 0 ? exports.ITooltipV2Position.RIGHT : _c, width = _a.width, anchorRef = _a.anchorRef, tooltipContainerRef = _a.tooltipContainerRef, open = _a.open, _d = _a.enableTooltipContainerHovering, enableTooltipContainerHovering = _d === void 0 ? false : _d, _e = _a.styleConfig, styleConfig = _e === void 0 ? {} : _e;
+        var children = _a.children, labelContainer = _a.labelContainer, _b = _a.borderSize, borderSize = _b === void 0 ? exports.ITooltipV2BorderSize.MD : _b, _c = _a.position, position = _c === void 0 ? exports.ITooltipV2Position.RIGHT : _c, width = _a.width, anchorRef = _a.anchorRef, tooltipContainerRef = _a.tooltipContainerRef, open = _a.open, _d = _a.enableTooltipContainerHovering, enableTooltipContainerHovering = _d === void 0 ? false : _d, _e = _a.styleConfig, styleConfig = _e === void 0 ? {} : _e, _f = _a.enableAnimation, enableAnimation = _f === void 0 ? false : _f;
         var theme = ctDesignTheme.useTheme();
         var root = styleConfig.root, labelContainerStyleConfig = styleConfig.labelContainer, tooltipArrowContainer = styleConfig.tooltipArrowContainer, tooltipContainer = styleConfig.tooltipContainer, toottipArrowIcon = styleConfig.toottipArrowIcon;
-        var _f = react.useState(open || false), isHovering = _f[0], setIsHovering = _f[1];
-        var _g = react.useState({}), tooltipStyles = _g[0], setTooltipStyles = _g[1];
-        var _h = react.useState({}), tooltipArrowStyles = _h[0], setTooltipArrowStyles = _h[1];
+        var _g = react.useState(open || false), isHovering = _g[0], setIsHovering = _g[1];
+        var _h = react.useState({}), tooltipStyles = _h[0], setTooltipStyles = _h[1];
+        var _j = react.useState({}), tooltipArrowStyles = _j[0], setTooltipArrowStyles = _j[1];
         var labelRef = react.useRef(null);
@@ -405,3 +405,17 @@ var tooltipRef = react.useRef(null);
         }; };
-        return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ position: 'relative' }, root, { children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({ onMouseEnter: onHover(exports.HOVER_TYPE.ENTER), onMouseLeave: onHover(exports.HOVER_TYPE.LEAVE), ref: labelRef, width: 'fit-content' }, labelContainerStyleConfig, { children: labelContainer })), !!children && (jsxRuntime.jsxs(react.Fragment, { children: [jsxRuntime.jsx(StyledTooltipV2, __assign({}, tooltipStyles, { visibility: isHovering && !ctDesignCommonUtils.isEmpty(tooltipStyles) ? 'visible' : 'hidden', width: width || 'fit-content', theme: theme, ref: combinedTooltipRef, onMouseLeave: onHover(exports.HOVER_TYPE.LEAVE) }, tooltipContainer, { children: children })), jsxRuntime.jsx(StyledTooltipV2Arrow, __assign({}, tooltipArrowStyles, { visibility: isHovering && !ctDesignCommonUtils.isEmpty(tooltipArrowStyles) ? 'visible' : 'hidden', theme: theme }, tooltipArrowContainer, { children: jsxRuntime.jsx(ctDesignIcons.TooltipChevronDown, __assign({}, toottipArrowIcon)) }))] }))] })));
+        var renderTooltipContainer = function () {
+            var content = (jsxRuntime.jsx(StyledTooltipV2, __assign({}, tooltipStyles, { visibility: isHovering && !ctDesignCommonUtils.isEmpty(tooltipStyles) ? 'visible' : 'hidden', width: width || 'fit-content', theme: theme, ref: combinedTooltipRef, onMouseLeave: onHover(exports.HOVER_TYPE.LEAVE) }, tooltipContainer, { children: children })));
+            if (enableAnimation) {
+                return (jsxRuntime.jsx(ctDesignTransition.Transition, __assign({ type: 'slide_fade', in: isHovering }, { children: content })));
+            }
+            return content;
+        };
+        var renderTooltipArrowContainer = function () {
+            var content = (jsxRuntime.jsx(StyledTooltipV2Arrow, __assign({}, tooltipArrowStyles, { visibility: isHovering && !ctDesignCommonUtils.isEmpty(tooltipArrowStyles) ? 'visible' : 'hidden', theme: theme }, tooltipArrowContainer, { children: jsxRuntime.jsx(ctDesignIcons.TooltipChevronDown, __assign({}, toottipArrowIcon)) })));
+            if (enableAnimation) {
+                return (jsxRuntime.jsx(ctDesignTransition.Transition, __assign({ type: 'slide_fade', in: isHovering }, { children: content })));
+            }
+            return content;
+        };
+        return (jsxRuntime.jsxs(ctDesignContainer.Container, __assign({ position: 'relative' }, root, { children: [jsxRuntime.jsx(ctDesignContainer.Container, __assign({ onMouseEnter: onHover(exports.HOVER_TYPE.ENTER), onMouseLeave: onHover(exports.HOVER_TYPE.LEAVE), ref: labelRef, width: 'fit-content' }, labelContainerStyleConfig, { children: labelContainer })), !!children && (jsxRuntime.jsxs(react.Fragment, { children: [renderTooltipContainer(), " ", renderTooltipArrowContainer()] }))] })));
     };
@@ -408,0 +422,0 @@

dist/type.d.ts

@@ -38,2 +38,3 @@ import React, { SVGProps } from 'react';
     };
+    enableAnimation?: boolean;
 }
@@ -40,0 +41,0 @@ export interface ITooltipV2Styles {

package.json

 {
   "name": "@cleartrip/ct-design-tooltip-v2",
-  "version": "3.14.0-SNAPSHORT-mevc.0",
+  "version": "3.14.0-SNAPSHOT-atp-changes.0",
   "description": "TooltipV2 Component",
@@ -18,11 +18,12 @@ "types": "dist/index.d.ts",
   "dependencies": {
-    "@cleartrip/ct-design-theme": "3.14.0-SNAPSHORT-mevc.0",
-    "@cleartrip/ct-design-container": "3.14.0-SNAPSHORT-mevc.0",
-    "@cleartrip/ct-design-common-utils": "3.14.0-SNAPSHORT-mevc.0",
-    "@cleartrip/ct-design-use-merge-refs": "3.14.0-SNAPSHORT-mevc.0",
-    "@cleartrip/ct-design-icons": "32.0.0-SNAPSHORT-mevc.0"
+    "@cleartrip/ct-design-container": "3.13.0",
+    "@cleartrip/ct-design-use-merge-refs": "3.13.0",
+    "@cleartrip/ct-design-icons": "32.0.0-SNAPSHOT-atp-changes.0",
+    "@cleartrip/ct-design-theme": "3.13.0",
+    "@cleartrip/ct-design-transition": "3.13.0",
+    "@cleartrip/ct-design-common-utils": "3.13.0"
   },
   "devDependencies": {
-    "@cleartrip/ct-design-types": "3.14.0-SNAPSHORT-mevc.0",
-    "@cleartrip/ct-design-typography": "3.14.0-SNAPSHORT-mevc.0"
+    "@cleartrip/ct-design-types": "3.13.0",
+    "@cleartrip/ct-design-typography": "3.13.0"
   },
@@ -29,0 +30,0 @@ "peerDependencies": {

New alerts

License Policy Violation

License

This 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

License

This 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

186524

increased by2.93%

Lines of code

1516

increased by3.13%

Worsened metrics

Dependency count

9

increased by12.5%

Dependency changes

• + Added@cleartrip/ct-design-transition@3.13.0

• + Added@cleartrip/ct-design-common-constants@3.13.0(transitive)

• + Added@cleartrip/ct-design-common-utils@3.13.0(transitive)

• + Added@cleartrip/ct-design-container@3.13.0(transitive)

• + Added@cleartrip/ct-design-icons@32.0.0-SNAPSHOT-atp-changes.0(transitive)

• + Added@cleartrip/ct-design-theme@3.13.0(transitive)

• + Added@cleartrip/ct-design-tokens@3.13.0(transitive)

• + Added@cleartrip/ct-design-transition@3.13.0(transitive)

• + Added@cleartrip/ct-design-types@3.13.0(transitive)

• + Added@cleartrip/ct-design-use-merge-refs@3.13.0(transitive)

• + Addedcsstype@3.1.3(transitive)

• + Addeddom-helpers@5.2.1(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-transition-group@4.4.5(transitive)

• - Removed@cleartrip/ct-design-common-constants@3.14.0-SNAPSHORT-mevc.0(transitive)

• - Removed@cleartrip/ct-design-common-utils@3.14.0-SNAPSHORT-mevc.0(transitive)

• - Removed@cleartrip/ct-design-container@3.14.0-SNAPSHORT-mevc.0(transitive)

• - Removed@cleartrip/ct-design-icons@32.0.0-SNAPSHORT-mevc.0(transitive)

• - Removed@cleartrip/ct-design-theme@3.14.0-SNAPSHORT-mevc.0(transitive)

• - Removed@cleartrip/ct-design-tokens@3.14.0-SNAPSHORT-mevc.0(transitive)

• - Removed@cleartrip/ct-design-types@3.14.0-SNAPSHORT-mevc.0(transitive)

• - Removed@cleartrip/ct-design-use-merge-refs@3.14.0-SNAPSHORT-mevc.0(transitive)

• - Removedreact-is@19.0.0(transitive)

• Updated@cleartrip/ct-design-common-utils@3.13.0

• Updated@cleartrip/ct-design-container@3.13.0

• Updated@cleartrip/ct-design-icons@32.0.0-SNAPSHOT-atp-changes.0

• Updated@cleartrip/ct-design-theme@3.13.0

• Updated@cleartrip/ct-design-use-merge-refs@3.13.0