Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@contentful/f36-tooltip

Package Overview
Dependencies
Maintainers
102
Versions
342
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@contentful/f36-tooltip - npm Package Compare versions

Comparing version 4.0.1-next-v4-6443.2247 to 4.0.1-next-v4-6465.2248

2

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,{useState as a,useRef as r,useEffect 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]=a(!1),P=c(h,"tooltip"),R=r(null),$=r(null),[L,A]=a(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]}}]});l((()=>{null!==O&&O()}),[g,O]);const[V,j]=a(!1),[q,U]=a(!1);l((()=>{C(q||V)}),[V,q]),l((()=>{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
{
"name": "@contentful/f36-tooltip",
"version": "4.0.1-next-v4-6443.2247+236460ce",
"version": "4.0.1-next-v4-6465.2248+74ededc0",
"description": "Forma 36: Tooltip component",

@@ -10,5 +10,5 @@ "scripts": {

"@babel/runtime": "^7.6.2",
"@contentful/f36-core": "4.0.1-next-v4-6443.2247+236460ce",
"@contentful/f36-tokens": "4.0.1-next-v4-6443.2247+236460ce",
"@contentful/f36-utils": "4.0.1-next-v4-6443.2247+236460ce",
"@contentful/f36-core": "4.0.1-next-v4-6465.2248+74ededc0",
"@contentful/f36-tokens": "4.0.1-next-v4-6465.2248+74ededc0",
"@contentful/f36-utils": "4.0.1-next-v4-6465.2248+74ededc0",
"@popperjs/core": "^2.4.4",

@@ -40,3 +40,3 @@ "csstype": "^3.0.5",

},
"gitHead": "236460ce04c14e69f1711a49589bb92a96134272"
"gitHead": "74ededc0207fac1c34cc8128a9b63e502f2a8301"
}
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc