@contentful/f36-tooltip - npm Package Compare versions

Comparing version 4.0.1-next-v4-6811.2284 to 4.0.1-next-v4-6831.2285

dist/main.js

		@@ -1,2 +0,2 @@
		var e=d(require("@babel/runtime/helpers/extends")),{cx:t,css:o}=require("emotion"),n=require("react"),a=d(n),{useState:r,useEffect:l,useRef:i}=n,{usePopper:s}=require("react-popper"),p=d(require("@contentful/f36-tokens")),{Portal:c}=require("@contentful/f36-utils"),{useId:u,Box:m}=require("@contentful/f36-core");function d(e){return e&&e.__esModule?e.default:e}var f,g,b,y,h={};f=h,g="Tooltip",b=()=>v,Object.defineProperty(f,g,{get:b,set:y,enumerable:!0,configurable:!0});const E=`calc(-1 * ((1rem * (10 / ${p.fontBaseDefault})) / 2))`,x=`calc(1rem * (10 / ${p.fontBaseDefault}))`;const v=({children:n,className:d,as:f="span",content:g,id:b,isVisible:y,hideDelay:h=0,onBlur:v,onFocus:I,onMouseLeave:M,onMouseOver:N,onKeyDown:k,targetWrapperClassName:q,maxWidth:w=360,testId:z="cf-ui-tooltip",placement:D="auto",usePortal:S=!1,...B})=>{const T={tooltipTargetWrapper:o({name:"b3pn3b",styles:"display:inline-block;position:relative;"}),tooltip:o({background:p.gray900,fontFamily:p.fontStackPrimary,fontSize:p.fontSizeS,fontWeight:p.fontWeightNormal,fontStyle:"normal",textDecoration:"none",color:p.colorWhite,textAlign:"center",lineHeight:p.lineHeightDefault,padding:`${p.spacingXs} calc(1rem * (10 / ${p.fontBaseDefault}))`,borderRadius:p.borderRadiusMedium,whiteSpace:"normal"},""),tooltipHidden:o({visibility:"hidden",pointerEvents:"none",zIndex:p.zIndexNegative},""),tooltipContainer:o({name:"1nqn0g6",styles:"& > button[disabled]{pointer-events:none;}"}),tooltipArrow:o({position:"absolute",'&[data-placement="top"]':{bottom:0,left:0,marginBottom:E},'&[data-placement="right"]':{left:0,marginLeft:E},'&[data-placement="bottom"]':{left:0,top:0,marginTop:E},'&[data-placement="left"]':{right:0,marginRight:E},"&::before":{content:'""',display:"block",height:x,width:x,backgroundColor:p.gray900,transform:"rotate3d(0, 0, 1, 45deg)",zIndex:p.zIndexNegative}},"")},[W,F]=r(!1),P=u(b,"tooltip"),C=i(null),R=i(null),[$,L]=r(null),{styles:O,attributes:_,forceUpdate:j}=s(C.current,R.current,{placement:D,modifiers:[{name:"arrow",options:{element:$,padding:parseFloat(p.borderRadiusSmall)}},{name:"offset",options:{offset:[0,10]}}]});l((()=>{null!==j&&j()}),[g,j]);const[A,H]=r(!1),[K,V]=r(!1);l((()=>{F(K\|\|A)}),[A,K]),l((()=>{y&&F(!0)}),[]);const U="string"==typeof w?w:`${w}px`,X={zIndex:p.zIndexTooltip,maxWidth:U,...O.popper};if(!g)return a.createElement(m,{as:f,className:q},n);const G=a.createElement(m,e({as:"span",id:P,ref:R,role:"tooltip",style:X,className:t(T.tooltip,d),testId:z,onMouseEnter:()=>{V(!0)},onMouseLeave:()=>{V(!1)}},_.popper),a.createElement("span",null,g),a.createElement("span",{className:T.tooltipArrow,"data-placement":_.popper&&_.popper["data-popper-placement"],ref:L,style:O.arrow}));return a.createElement(a.Fragment,null,W?a.createElement(a.Fragment,null,S?a.createElement(c,null,G):G):null,a.createElement(m,e({as:f,ref:C,className:t(T.tooltipContainer,q),onMouseEnter:e=>{H(!0),N&&N(e)},onMouseLeave:e=>{setTimeout((()=>H(!1)),h),M&&M(e)},onFocus:e=>{H(!0),I&&I(e)},onBlur:e=>{setTimeout((()=>H(!1)),h),v&&v(e)},onKeyDown:e=>{"Escape"===e.key&&setTimeout((()=>H(!1)),h),k&&k(e)}},B),a.Children.map(n,(e=>{if(a.isValidElement(e))return a.cloneElement(e,{"aria-describedby":P})}))))};var I,M;I=module.exports,M=h,Object.keys(M).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(I,e,{enumerable:!0,get:function(){return M[e]}})}));
		var e=d(require("@babel/runtime/helpers/extends")),{cx:t,css:o}=require("emotion"),n=require("react"),a=d(n),{useEffect:r,useState:l,useRef:i}=n,{usePopper:s}=require("react-popper"),p=d(require("@contentful/f36-tokens")),{Portal:c}=require("@contentful/f36-utils"),{useId:u,Box:m}=require("@contentful/f36-core");function d(e){return e&&e.__esModule?e.default:e}var f,g,b,y,h={};f=h,g="Tooltip",b=()=>v,Object.defineProperty(f,g,{get:b,set:y,enumerable:!0,configurable:!0});const E=`calc(-1 * ((1rem * (10 / ${p.fontBaseDefault})) / 2))`,x=`calc(1rem * (10 / ${p.fontBaseDefault}))`;const v=({children:n,className:d,as:f="span",content:g,id:b,isVisible:y,hideDelay:h=0,onBlur:v,onFocus:I,onMouseLeave:M,onMouseOver:N,onKeyDown:k,targetWrapperClassName:q,maxWidth:w=360,testId:z="cf-ui-tooltip",placement:D="auto",usePortal:S=!1,...B})=>{const T={tooltipTargetWrapper:o({name:"b3pn3b",styles:"display:inline-block;position:relative;"}),tooltip:o({background:p.gray900,fontFamily:p.fontStackPrimary,fontSize:p.fontSizeS,fontWeight:p.fontWeightNormal,fontStyle:"normal",textDecoration:"none",color:p.colorWhite,textAlign:"center",lineHeight:p.lineHeightDefault,padding:`${p.spacingXs} calc(1rem * (10 / ${p.fontBaseDefault}))`,borderRadius:p.borderRadiusMedium,whiteSpace:"normal"},""),tooltipHidden:o({visibility:"hidden",pointerEvents:"none",zIndex:p.zIndexNegative},""),tooltipContainer:o({name:"1nqn0g6",styles:"& > button[disabled]{pointer-events:none;}"}),tooltipArrow:o({position:"absolute",'&[data-placement="top"]':{bottom:0,left:0,marginBottom:E},'&[data-placement="right"]':{left:0,marginLeft:E},'&[data-placement="bottom"]':{left:0,top:0,marginTop:E},'&[data-placement="left"]':{right:0,marginRight:E},"&::before":{content:'""',display:"block",height:x,width:x,backgroundColor:p.gray900,transform:"rotate3d(0, 0, 1, 45deg)",zIndex:p.zIndexNegative}},"")},[W,F]=l(!1),P=u(b,"tooltip"),C=i(null),R=i(null),[$,L]=l(null),{styles:O,attributes:_,forceUpdate:j}=s(C.current,R.current,{placement:D,modifiers:[{name:"arrow",options:{element:$,padding:parseFloat(p.borderRadiusSmall)}},{name:"offset",options:{offset:[0,10]}}]});r((()=>{null!==j&&j()}),[g,j]);const[A,H]=l(!1),[K,V]=l(!1);r((()=>{F(K\|\|A)}),[A,K]),r((()=>{y&&F(!0)}),[]);const U="string"==typeof w?w:`${w}px`,X={zIndex:p.zIndexTooltip,maxWidth:U,...O.popper};if(!g)return a.createElement(m,{as:f,className:q},n);const G=a.createElement(m,e({as:"span",id:P,ref:R,role:"tooltip",style:X,className:t(T.tooltip,d),testId:z,onMouseEnter:()=>{V(!0)},onMouseLeave:()=>{V(!1)}},_.popper),a.createElement("span",null,g),a.createElement("span",{className:T.tooltipArrow,"data-placement":_.popper&&_.popper["data-popper-placement"],ref:L,style:O.arrow}));return a.createElement(a.Fragment,null,W?a.createElement(a.Fragment,null,S?a.createElement(c,null,G):G):null,a.createElement(m,e({as:f,ref:C,className:t(T.tooltipContainer,q),onMouseEnter:e=>{H(!0),N&&N(e)},onMouseLeave:e=>{setTimeout((()=>H(!1)),h),M&&M(e)},onFocus:e=>{H(!0),I&&I(e)},onBlur:e=>{setTimeout((()=>H(!1)),h),v&&v(e)},onKeyDown:e=>{"Escape"===e.key&&setTimeout((()=>H(!1)),h),k&&k(e)}},B),a.Children.map(n,(e=>{if(a.isValidElement(e))return a.cloneElement(e,{"aria-describedby":P})}))))};var I,M;I=module.exports,M=h,Object.keys(M).forEach((function(e){"default"!==e&&"__esModule"!==e&&Object.defineProperty(I,e,{enumerable:!0,get:function(){return M[e]}})}));
		//# sourceMappingURL=main.js.map

dist/module.js

		@@ -1,2 +0,2 @@
		import e from"@babel/runtime/helpers/esm/extends";import{cx as t,css as o}from"emotion";import n,{useRef as a,useEffect as r,useState as l}from"react";import{usePopper as i}from"react-popper";import s from"@contentful/f36-tokens";import{Portal as p}from"@contentful/f36-utils";import{Box as m,useId as c}from"@contentful/f36-core";var u,d,f,g;u={},d="Tooltip",f=()=>h,Object.defineProperty(u,d,{get:f,set:g,enumerable:!0,configurable:!0});const b=`calc(-1 * ((1rem * (10 / ${s.fontBaseDefault})) / 2))`,y=`calc(1rem * (10 / ${s.fontBaseDefault}))`;const h=({children:u,className:d,as:f="span",content:g,id:h,isVisible:x,hideDelay:E=0,onBlur:v,onFocus:I,onMouseLeave:N,onMouseOver:w,onKeyDown:z,targetWrapperClassName:D,maxWidth:S=360,testId:T="cf-ui-tooltip",placement:k="auto",usePortal:B=!1,...M})=>{const W={tooltipTargetWrapper:o({name:"b3pn3b",styles:"display:inline-block;position:relative;"}),tooltip:o({background:s.gray900,fontFamily:s.fontStackPrimary,fontSize:s.fontSizeS,fontWeight:s.fontWeightNormal,fontStyle:"normal",textDecoration:"none",color:s.colorWhite,textAlign:"center",lineHeight:s.lineHeightDefault,padding:`${s.spacingXs} calc(1rem * (10 / ${s.fontBaseDefault}))`,borderRadius:s.borderRadiusMedium,whiteSpace:"normal"},""),tooltipHidden:o({visibility:"hidden",pointerEvents:"none",zIndex:s.zIndexNegative},""),tooltipContainer:o({name:"1nqn0g6",styles:"& > button[disabled]{pointer-events:none;}"}),tooltipArrow:o({position:"absolute",'&[data-placement="top"]':{bottom:0,left:0,marginBottom:b},'&[data-placement="right"]':{left:0,marginLeft:b},'&[data-placement="bottom"]':{left:0,top:0,marginTop:b},'&[data-placement="left"]':{right:0,marginRight:b},"&::before":{content:'""',display:"block",height:y,width:y,backgroundColor:s.gray900,transform:"rotate3d(0, 0, 1, 45deg)",zIndex:s.zIndexNegative}},"")},[F,C]=l(!1),P=c(h,"tooltip"),R=a(null),$=a(null),[L,A]=l(null),{styles:H,attributes:K,forceUpdate:O}=i(R.current,$.current,{placement:k,modifiers:[{name:"arrow",options:{element:L,padding:parseFloat(s.borderRadiusSmall)}},{name:"offset",options:{offset:[0,10]}}]});r((()=>{null!==O&&O()}),[g,O]);const[V,j]=l(!1),[q,U]=l(!1);r((()=>{C(q\|\|V)}),[V,q]),r((()=>{x&&C(!0)}),[]);const X="string"==typeof S?S:`${S}px`,G={zIndex:s.zIndexTooltip,maxWidth:X,...H.popper};if(!g)return n.createElement(m,{as:f,className:D},u);const J=n.createElement(m,e({as:"span",id:P,ref:$,role:"tooltip",style:G,className:t(W.tooltip,d),testId:T,onMouseEnter:()=>{U(!0)},onMouseLeave:()=>{U(!1)}},K.popper),n.createElement("span",null,g),n.createElement("span",{className:W.tooltipArrow,"data-placement":K.popper&&K.popper["data-popper-placement"],ref:A,style:H.arrow}));return n.createElement(n.Fragment,null,F?n.createElement(n.Fragment,null,B?n.createElement(p,null,J):J):null,n.createElement(m,e({as:f,ref:R,className:t(W.tooltipContainer,D),onMouseEnter:e=>{j(!0),w&&w(e)},onMouseLeave:e=>{setTimeout((()=>j(!1)),E),N&&N(e)},onFocus:e=>{j(!0),I&&I(e)},onBlur:e=>{setTimeout((()=>j(!1)),E),v&&v(e)},onKeyDown:e=>{"Escape"===e.key&&setTimeout((()=>j(!1)),E),z&&z(e)}},M),n.Children.map(u,(e=>{if(n.isValidElement(e))return n.cloneElement(e,{"aria-describedby":P})}))))};export{h as Tooltip};
		import e from"@babel/runtime/helpers/esm/extends";import{cx as t,css as o}from"emotion";import n,{useEffect as a,useState as r,useRef as l}from"react";import{usePopper as i}from"react-popper";import s from"@contentful/f36-tokens";import{Portal as p}from"@contentful/f36-utils";import{useId as m,Box as c}from"@contentful/f36-core";var u,d,f,g;u={},d="Tooltip",f=()=>h,Object.defineProperty(u,d,{get:f,set:g,enumerable:!0,configurable:!0});const b=`calc(-1 * ((1rem * (10 / ${s.fontBaseDefault})) / 2))`,y=`calc(1rem * (10 / ${s.fontBaseDefault}))`;const h=({children:u,className:d,as:f="span",content:g,id:h,isVisible:x,hideDelay:E=0,onBlur:v,onFocus:I,onMouseLeave:N,onMouseOver:w,onKeyDown:z,targetWrapperClassName:D,maxWidth:S=360,testId:T="cf-ui-tooltip",placement:k="auto",usePortal:B=!1,...M})=>{const W={tooltipTargetWrapper:o({name:"b3pn3b",styles:"display:inline-block;position:relative;"}),tooltip:o({background:s.gray900,fontFamily:s.fontStackPrimary,fontSize:s.fontSizeS,fontWeight:s.fontWeightNormal,fontStyle:"normal",textDecoration:"none",color:s.colorWhite,textAlign:"center",lineHeight:s.lineHeightDefault,padding:`${s.spacingXs} calc(1rem * (10 / ${s.fontBaseDefault}))`,borderRadius:s.borderRadiusMedium,whiteSpace:"normal"},""),tooltipHidden:o({visibility:"hidden",pointerEvents:"none",zIndex:s.zIndexNegative},""),tooltipContainer:o({name:"1nqn0g6",styles:"& > button[disabled]{pointer-events:none;}"}),tooltipArrow:o({position:"absolute",'&[data-placement="top"]':{bottom:0,left:0,marginBottom:b},'&[data-placement="right"]':{left:0,marginLeft:b},'&[data-placement="bottom"]':{left:0,top:0,marginTop:b},'&[data-placement="left"]':{right:0,marginRight:b},"&::before":{content:'""',display:"block",height:y,width:y,backgroundColor:s.gray900,transform:"rotate3d(0, 0, 1, 45deg)",zIndex:s.zIndexNegative}},"")},[F,C]=r(!1),P=m(h,"tooltip"),R=l(null),$=l(null),[L,A]=r(null),{styles:H,attributes:K,forceUpdate:O}=i(R.current,$.current,{placement:k,modifiers:[{name:"arrow",options:{element:L,padding:parseFloat(s.borderRadiusSmall)}},{name:"offset",options:{offset:[0,10]}}]});a((()=>{null!==O&&O()}),[g,O]);const[V,j]=r(!1),[q,U]=r(!1);a((()=>{C(q\|\|V)}),[V,q]),a((()=>{x&&C(!0)}),[]);const X="string"==typeof S?S:`${S}px`,G={zIndex:s.zIndexTooltip,maxWidth:X,...H.popper};if(!g)return n.createElement(c,{as:f,className:D},u);const J=n.createElement(c,e({as:"span",id:P,ref:$,role:"tooltip",style:G,className:t(W.tooltip,d),testId:T,onMouseEnter:()=>{U(!0)},onMouseLeave:()=>{U(!1)}},K.popper),n.createElement("span",null,g),n.createElement("span",{className:W.tooltipArrow,"data-placement":K.popper&&K.popper["data-popper-placement"],ref:A,style:H.arrow}));return n.createElement(n.Fragment,null,F?n.createElement(n.Fragment,null,B?n.createElement(p,null,J):J):null,n.createElement(c,e({as:f,ref:R,className:t(W.tooltipContainer,D),onMouseEnter:e=>{j(!0),w&&w(e)},onMouseLeave:e=>{setTimeout((()=>j(!1)),E),N&&N(e)},onFocus:e=>{j(!0),I&&I(e)},onBlur:e=>{setTimeout((()=>j(!1)),E),v&&v(e)},onKeyDown:e=>{"Escape"===e.key&&setTimeout((()=>j(!1)),E),z&&z(e)}},M),n.Children.map(u,(e=>{if(n.isValidElement(e))return n.cloneElement(e,{"aria-describedby":P})}))))};export{h as Tooltip};
		//# sourceMappingURL=module.js.map

package.json

		{
		"name": "@contentful/f36-tooltip",
		"version": "4.0.1-next-v4-6811.2284+e70f58a9",
		"version": "4.0.1-next-v4-6831.2285+a36c0a0f",
		"description": "Forma 36: Tooltip component",
		@@ -10,5 +10,5 @@ "scripts": {
		"@babel/runtime": "^7.6.2",
		"@contentful/f36-core": "4.0.1-next-v4-6811.2284+e70f58a9",
		"@contentful/f36-tokens": "4.0.1-next-v4-6811.2284+e70f58a9",
		"@contentful/f36-utils": "4.0.1-next-v4-6811.2284+e70f58a9",
		"@contentful/f36-core": "4.0.1-next-v4-6831.2285+a36c0a0f",
		"@contentful/f36-tokens": "4.0.1-next-v4-6831.2285+a36c0a0f",
		"@contentful/f36-utils": "4.0.1-next-v4-6831.2285+a36c0a0f",
		"@popperjs/core": "^2.4.4",
		@@ -40,3 +40,3 @@ "csstype": "^3.0.5",
		},
		"gitHead": "e70f58a9db293569e511c624deb789c471a1bb53"
		"gitHead": "a36c0a0f6b84fd2eba07adac8e15dbc5cf1c460d"
		}

@contentful/f36-tooltip - npm Package Compare versions

New alerts

Fixed alerts

Dependency changes